在底部定位时溢出滚动

时间:2016-08-23 04:33:23

标签: html css overflow css-position

我希望我的内容从其父级的底部开始并向上扩展,允许滚动。我可以找到锚定到底部的唯一方法是在父/子中使用位置相对/绝对,但是当我这样做时,以及将子项绝对定位在其父级的底部,溢出并不是工作正常。

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

和css

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

}

我有更多东西要显示在我的内部div中,所以它肯定会扩展到比外部div更高的高度。任何人都可以解释为什么当我位于底部时这不起作用?感谢。

https://jsfiddle.net/ty1Lwyua/

1 个答案:

答案 0 :(得分:1)

我认为仅使用CSS做这不是一个好主意。 CSS是文档样式表,你需要更“动态”的东西(javascript to rescue)。

仅限CSS的解决方案可能更像是黑客攻击:http://jsfiddle.net/UDuqe/

解决方案将改为:

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

scrollToBottom();

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

更新

设置新内部div的滚动:

添加html:

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

然后添加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();
}

整个解决方案:https://jsfiddle.net/e86pawn5/