CODEWITHSUNDEEP
htmlcssoverflowcss-position
Bruno
Bruno

Reputation: 65

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/

Upvotes: 0

Views: 1665

Answers (1)

Otto
Otto

Reputation: 88

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/

Update:

To set the scroll on new inner div:

Add the html:

<form>   
    <input id="message" type="text">   
    <button onclick="addComment(event)"> Insert new Comment</button> 
</form>

Then add javascript:

addComment = function(event) {
    event.preventDefault(); //prevent the form submit (default behavior of "button")
    var relative = document.getElementById("relative");
    var inner = document.getElementById("inner");
    var message = document.getElementById("message");
    var div = document.createElement("div");
    div.innerHTML = message.value;
    relative.appendChild(div);
    message.value = "";
    scrollToBottom();
}

Whole solution: https://jsfiddle.net/e86pawn5/

Upvotes: 1

Related Questions