在底部定位时溢出滚动答案

【问题标题】：Overflow scroll while positioning at bottom在底部定位时溢出滚动
【发布时间】：2016-08-24 00:22:28
【问题描述】：

我希望我的内容从其父级的底部开始并向上延伸，从而允许滚动。我能找到锚定到底部的唯一方法是在父/子中使用相对/绝对位置，但似乎当我这样做时，连同将子绝对定位在其父级底部，溢出无法正常工作.

<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/

【问题讨论】：

标签： html css overflow css-position

【解决方案1】：

我认为只用 CSS 做这件事不是一个好主意。 CSS 是文档样式表，您需要一些更“动态”的东西（使用 JavaScript）。

只有 CSS 的解决方案更像是一个 hack：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/

【讨论】：

谢谢，这回答了我原来的问题。问题是，我动态插入内容，我想开始将它插入到相关容器的底部。如果我将内部容器（我插入内容的位置）放在底部并让它向上生长，它会起作用，但是你能用你的解决方案展示如何做到这一点吗？
我更新了答案。向内部 div 添加内容时，只需调用滚动函数即可完成工作。