在我看来，这似乎是一个非常业余的问题，但它仍然是一个令人沮丧的反常现象。
这实际上是两部分问题的第二部分。第一部分是相当常见的部分，涉及让元素拉伸(stretch)到其父对象的 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 是否会拉伸(stretch)到 100% 高度，但它仍然没有。
然后我发现，如果我从每个元素中删除 height:auto;，它们将遵循 100% 高度属性，但会产生不需要的副作用:
正如您在图片中看到的那样，每个元素现在确实是其父元素高度的 100%，迫使底部延伸到其父元素的边界之外。 (即使在我的第一个示例中，带绿色边框的最外面的 DIV 也比预期的延伸得更远，因为在页面上它上面还有另一个同级 DIV)。注意:仔细观察后，我可以看到蓝色 TABLE 元素实际上与其红色 DIV 父元素的高度不同，但它仍然超出了它的边界。我不确定这是否意味着什么，但我确实注意到了。
有人会认为这很容易解决，但尽管我付出了努力，但我没有成功。
如果我只保留 height:auto; 并删除 100% 属性，这根本不会拉伸(stretch)它们。
我已经通过 Google 和 StackOverflow 搜索了这方面的解决方案，尽管许多网站都涵盖了 100% 高度问题，但我仍然没有找到实际的解决方案。
我目前正在 Firefox 中对此进行测试。
最佳答案
你可以使用绝对定位。
#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>
关于html - CSS - 如何强制元素达到父元素剩余/可用空间的 100%，而不超出它？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7778306/