Bruno Bruno - 3 months ago 19
CSS Question

Overflow scroll while positioning at bottom

I want my content to start at the bottom of its parent and extend upwards, allowing scrolling. The only way I could find to anchor to bottom is to use position relative/absolute in the parent/child, but it seems when I do this, along with absolute positioning the child at the bottom of its parent, overflow doesn't work correctly.

<div id="relative">
<div id="inner">
<div>
scroll<br>
stuff<br>
here<br>
</div>
</div>
</div>


And the css

#relative {
position: relative;
height: 100px;
overflow-y: scroll;
}
#inner {
position: absolute;
bottom: 0;


}

I have more stuff to display in my inner div, so it definitely expands to a greater height than the outer div. Can anyone explain why this doesn't work when I position at the bottom? Thanks.

https://jsfiddle.net/ty1Lwyua/

Answer

I think that do it only with CSS is not a good idea. CSS is the document style sheet and you require something more "dynamic" (javascript to the rescue).

The CSS only solution can be more like a hack: http://jsfiddle.net/UDuqe/

The solution instead will be:

scrollToBottom = function () {
  var relative = document.getElementById("relative");
  relative.scrollTop = relative.scrollHeight;
};

scrollToBottom();

https://jsfiddle.net/dcLcxpqj/1/