javascript - 如何使 html div 在其高度达到页面的 100% 高度后垂直滚动？

Question

我的页面上有一个 div，还有一个按钮，按下时会添加一个新的 <p>。中的元素<div> .如果我一直按下按钮，div 的高度将超过实际页面的高度，我必须滚动页面才能看到最后一段，然后向上滚动才能再次按下按钮。我希望 div 在达到页面高度后可以垂直滚动。这是我用于 div 的 CSS:

div#messages{
width: 50%;
margin-left: auto;
margin-right: auto;
padding:20px;
border: 1px solid black;
border-radius: 3px;
overflow-y: auto;
}

但是 overflow-y:auto;属性似乎不起作用？

我哪里做错了，我怎样才能达到预期的效果？

谢谢。

JSFIDDLE:https://jsfiddle.net/pm5wkgv4/

Answer 1

你需要

html,body{
    height:100%;
    margin:0;
    padding:0;
}

* { /*Or at least html, body and #messages*/
    box-sizing: border-box;
}

#messages{
    width: 50%;
    max-height: 100%;
    padding:20px;
    border: 1px solid black;
    border-radius: 3px;
    overflow-y: auto;
    position:absolute;
    top:0;
    left:25%;
    background:#fff;
}

jsfiddle:https://jsfiddle.net/vimxts/pm5wkgv4/2/

另外，一个页面只能有一个id，可以把#message之前的div部分删掉