我的页面上有一个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/
答案 0 :(得分:2)
你需要
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
部分
答案 1 :(得分:1)
答案 2 :(得分:1)
使用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;
}