CSS - 如何强制元素占用父元素剩余/可用空间的100%而不超出它？
在我看来,这似乎是一个非常业余的问题,但尽管如此,它仍然是一个令人沮丧的异常现象.
这实际上是2部分问题的第2部分.第一部分是一个相当常见的部分,涉及使元素伸展到其父对象的100%高度.在我的演示中,我有以下HTML:
<body>
<div id="sbcontainer">
DIV 1
<div id="sbcontent">
DIV 2
<table id="sbmaintable" cellspacing="0">
<tr>
<td>
TABLE
</td>
</tr>
</table> <!-- END MAINTABLE -->
</div> <!-- END CONTENT -->
</div> <!-- END CONTAINER -->
</body>
我希望这里的每个元素都填充其父元素中的所有垂直空间.我尝试在每个元素上使用以下样式(请注意,在我的演示中BODY和HTML也设置为100%高度):
min-height: 100%;
height: auto !important;
height: 100%;
结果如下:
如您所见,最外面的DIV遵循100%高度属性,但其余的没有.正如图像注释中暗示的那样,但实际上没有在此图像中显示,我尝试将第二个DIV(红色边框)设置为400px的静态高度,以查看其中的TABLE是否会拉伸到100%高度,但它仍然没有.
然后我发现,如果我height:auto;从每个元素中删除它们,它们将遵循100%高度属性,但会产生不必要的副作用:
正如您在图像中看到的那样,每个元素现在真正是其父元素高度的100%,迫使底部延伸到其父元素的边界之外.(即使在我的第一个例子中,带有绿色边框的最外面的DIV比期望的更远,因为页面上方有另一个兄弟DIV).注意:仔细观察后,我可以看到蓝色TABLE元素实际上与其红色DIV父元素的高度不同,但它仍然超出了它的边界.我不确定这是否意味着什么,但我确实注意到了.
有人会认为这很容易解决,但尽管我努力,但我没有成功.
如果我只保留height:auto;并删除100%属性,则根本不会拉伸它们.
我通过Google和StackOverflow搜索了这方面的解决方案,虽然许多网站覆盖了100%的高度问题,但我仍然没有找到实际的解决方案.
我目前正在Firefox中测试它.
LaC*_*LaC 13
您可以使用绝对定位.
#b {
width: 40em;
height: 20em;
position:relative;
background: red;
}
#c {
position: absolute;
top: 1em;
bottom: 1em;
left: 1em;
right: 1em;
background: blue;
}
<div id="b">
<div id="c">
</div>
</div>
| 归档时间： |
|
| 查看次数： |
11995 次 |
| 最近记录： |