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

Question

我的页面上有一个 div，还有一个按钮，当按下该按钮时，会在该 <div> 中添加一个新的 <p> 元素。如果我一直按下按钮，则 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部分

Answer 2

这是否可以解决您的问题：Plunkr

你可以使用

height:60vh;

指定高度。

Answer 3

使用 Daniel Cheung 的答案，如果您希望页面不可滚动，您可能需要添加：overflow: hidden。

https://jsfiddle.net/pm5wkgv4/1/

#message {
    max-height:100%;
    box-sizing: border-box;
}

html, body {
    height:100%;
    box-sizing: border-box;
    overflow: hidden;
}