给出这个HTML:
<body>
<div id="a"></div>
<div id="b"></div>
</body>
我想#b填充其容器块的所有剩余垂直空间,我从这开始:
body {
height: 500px;
width: 500px;
overflow: hidden;
}
#a {
height: 100px;
width: 100px;
}
#b {
height: 100%;
width: 100%;
}
所以#b是100%的高度,这意味着它正在占据其父容器块的高度,也就是说,500px问题是overflow: hidden;似乎不起作用,#b没有被剪裁.
另一方面,如果我用另一个具有上述相同属性的div进行换行#a,我得到了所需的结果:#bbody
#wrap {
height: 500px;
width: 500px;
overflow: hidden;
}
#a {
height: 100px;
width: 100px;
}
#b {
height: 100%;
width: 100%;
}
用这个HTML当然:
<body>
<div id="wrap">
<div id="a"></div>
<div id="b"></div>
</div>
</body>
我的问题是为什么div并且body似乎有相同属性的不同行为？没有包装器有没有办法获得相同的效果？
为了说明我创建了两个jsFiddles的问题:
jsFiddle与body标签作为包装:http://jsfiddle.net/3AMtG/
jsFiddle与div标签作为包装:http://jsfiddle.net/2QWn3/
两个具有相同属性的jsFiddles会产生不同的结果.这是为什么？
该overflow属性具有特定于HTML html和body元素的某些特殊行为,这些行为在CSS2.1规范中有所描述.这些特殊情况适用于在正常情况下适应整个页面上的更改溢出设置,因此作者只需将其设置为html或者body两者之一,而不是两者.
在这种情况下,当您应用overflow: hidden时body,它实际上会影响视口而不是body(您可以通过调整预览窗格的大小来缩短它 - 使预览窗格本身不显示任何滚动条).这会导致#b正常溢出的身体,即使你给它一个固定的高度使用小于的总和#a和#b.换句话说,就好像你从来没有把它放在身体上.
但是,如果设置overflow为visibleon 以外的其他内容html,则会导致视口使用给定的值html而不是body,从而使声明保持body不受影响并允许其行为与包装器的行为相同:
html {
overflow: auto;
}
body {
height: 500px;
width: 500px;
overflow: hidden;
}
| 归档时间： |
|
| 查看次数： |
952 次 |
| 最近记录： |