这似乎是一个非常业余的问题,但在我看来,尽管如此,仍然是一个令人沮丧的异常情况。
这实际上是一个由两个部分组成的问题的第二部分。第一部分是一个相当常见的问题,涉及使元素拉伸到其父对象的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%;
结果如下所示:
![enter image description here](https://istack.dev59.com/JhIpn.webp)
然后我发现,如果我从每个元素中删除
height:auto;
,它们将遵循100%的高度属性,但会产生不需要的副作用:
![enter image description here](https://istack.dev59.com/saAJo.webp)
一个人会认为这将是一个容易解决的问题,但尽管我努力过,但并没有成功。如果我仅保留
height:auto;
并删除100%
属性,则根本不会拉伸它们。我通过 Google 和 StackOverflow 搜索了解决此问题的方法,尽管许多站点都涵盖了 100% 高度问题,但我仍然没有找到实际的解决方案。
我目前正在 Firefox 中测试此功能。
height: 100%
表示“父元素的高度”。当你向父元素添加内容时,它会适当地将子元素(仍具有父元素的高度)向下移动(请参见:http://jsfiddle.net/blineberry/rtC9H/)。如果你能解释一下使用height: 100%
所要达到的效果,我们可能可以更好地帮助你。是用于图片?颜色?也许还有其他方法可以实现。另外,请参见:https://dev59.com/6XVD5IYBdhLWcg3wGXhI - Brent