我希望我的内容从其父级的底部开始并向上扩展,允许滚动。我可以找到锚定到底部的唯一方法是在父/子中使用位置相对/绝对,但是当我这样做时,以及将子项绝对定位在其父级的底部,溢出并不是工作正常。
<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更高的高度。任何人都可以解释为什么当我位于底部时这不起作用?感谢。
答案 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();
}