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，您可以在div

之前删除#message部分

Answer 2

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

你可以使用

height:60vh;

指定heigt。

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;
}

如何在高度达到页面高度100％后使html div垂直滚动？

3 个答案: