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

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 answer，如果您希望页面不可滚动，您可能需要添加：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;
}

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

How to make a html div vertically scrollable after it's height reaches 100% height of the page?

html

javascript

css

scrollview