[英]CSS - How to force elements to 100% of remaining/available space of parent element without extending beyond it?
在我看来，这似乎是一个非常业余的问题，但尽管如此，这仍然是一个令人沮丧的异常现象。
这实际上是两部分问题的第二部分。 第一部分是一个相当常见的部分，涉及让元素拉伸到其父对象的 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（红色边框）设置为 400 像素的静态高度，以查看其中的 TABLE 是否会拉伸到 100% 高度，但仍然没有。
然后我发现如果我删除height:auto; 从每个元素中，它们将遵循 100% 的高度属性，但会产生不需要的副作用：
正如您在图像中看到的，每个元素现在真正是其父元素高度的 100%，迫使底部延伸到其父元素的边界之外。 （即使在我的第一个示例中，带有绿色边框的最外面的 DIV 比预期的延伸得更远，因为页面上还有另一个同级 DIV）。 注意：更仔细地查看后，我可以看到蓝色 TABLE 元素实际上与其红色 DIV 父元素的高度不同，但它仍然超出了它的边界。 我不确定这是否意味着什么，但我确实注意到了。
有人会认为这是一件容易解决的事情，但尽管我努力了，我还是没有成功。
如果我只保留height:auto; 并删除100%属性，这根本不会拉伸它们。
我已经通过 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>
我相信解决此类问题的正确方法是使用 flexbox。 Flexbox 最近对所有现代浏览器都有很好的支持。
为父级使用以下内容
.stretch-items {
display: flex;
flex-direction: column;
}
对于应该增长的项目
.stretch-items .stretch {
flex-grow: 1;
}
这是一个演示它的代码笔https://codepen.io/giorgosk/pen/NWWaqPO
强制元素在固定宽度的元素之间使用100％的可用空间？
[英]force element to use 100% of available space between fixed width elements?
如何设置div来占用基于父div的剩余可用空间而不进行包装？
[英]How do I set a div to take up the remaining space available based on the parent's div without wrapping?
如何设置DIV以使用其父容器中100％的剩余空间？
[英]How can you set a DIV to use 100% of the remaining space in its parent container?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.