如何将绝对定位的元素推到底部而不重叠

Question

I have a container in which the text can go larger, but need to always make sure that the child element with absolute positioned element should always stick to the bottom of the container and should not overlap with the top container content.

found many examples but all are developed using flexbox, need to support internet explorer 9

this is what tried.

 .container{ max-width: 940px; margin: 20px auto; border: 1px solid red; } .table{ display: table; width: 100%; } .table-cell{ display: table-cell; position: relative; height: 260px; } .absolute{ position: absolute; bottom: 0; } 

 <div class="container"> <div class="table"> <div class="table-cell"> <div> This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. </div> <div class="absolute"> asdasd </div> </div> </div> </div> 

Answer 1

As mentioned in the comment, you can always add padding-bottom (to your long text div) relative to your .absolute content height. Since you tagged jQuery, I recommend adding it dynamically. Set your padding-bottom using this value: jQuery('.absolute').height()