出于好奇,考虑下面的例子,为什么#container div上的边距导致垂直滚动条出现在浏览器中？容器的高度远小于设置为100%的身高.
我已经为除#container之外的所有元素将padding和margin设置为0.请注意,我故意在#container div上省略了绝对定位.在这种情况下,浏览器如何计算身体的高度以及保证金如何影响身体？
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { padding:0; margin:0;}
html, body { height:100%; }
#container
{
padding:10px;
margin:50px;
border:1px solid black;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div id='container'>
</div>
</body>
</html>
Bol*_*ock 54
如果你画出背景html和body(给它自己的颜色),你会很快注意到它body正在向下移动#container,并且#container它本身并没有偏离顶部body.这是副作用保证金崩溃,这是我在详细讨论这里(虽然这个答案描述了一个稍微不同的设置).
正是这种行为导致滚动条出现,因为你声明body了100%的高度html.请注意,实际高度body不受影响,因为边距永远不会包含在高度计算中.
Mic*_*hel 18
有点晚了,但也许有人帮忙.
添加float: left;以#container删除滚动条,如W3C所说:
•浮动框和任何其他框之间的边距不会折叠(甚至浮动及其流入子项之间也不会).
har*_*wla 12
根据@ BoltClock♦的回答,我通过将边距归零来修复它......
所以
html,body, #st-full-pg {
height: 100%;
margin: 0;
}
适用于将id"st-full-pg"分配给面板div(其中还包含面板标题和面板主体)
小智 5
html,body {
height: 100%;
margin: 0;
overflow: hidden;
}
这对我有用