CSS - 如何强制元素到父元素的剩余/可用空间的100％，而不扩展到它？ [英] CSS - How to force elements to 100% of remaining/available space of parent element without extending beyond it?
问题描述
这看起来像一个真正的业余的问题，在我看来，但仍然是一个令人沮丧的异常。
This seems like a really amateur question, in my opinion, but nonetheless it's still a frustrating anomaly.
这实际上是一个2部分问题的第二部分。第一部分是一个相当普通的，涉及获取元素拉伸到其父对象的100％高度。在我的演示，我有以下HTML：
This is actually the 2nd part of a 2 part problem. The first part is a rather common one, involving getting an element to stretch to 100% height of its parent object. In my demo, I have the following 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％高度在我的演示）：
I want each element here to fill all vertical space within its parent element. I tried used the following style on each of the elements (Please note that BODY and HTML are also set to 100% height in my demo):
min-height: 100%;
height: auto !important;
height: 100%;
结果如下：
The result was as follows:
正如你所看到的，最外面的DIV遵循100％的高度属性，但是休息没有。如图像注释中所示，但实际上没有显示在这个图像中，我试图将第二个DIV（红色边框）设置为静态高度为400px，看看TABLE是否会拉伸到100％的高度，但它仍然没有。
As you can see, the outermost DIV followed the 100% height property but the rest did not. As implied in the image note, but not actually shown in this image, I tried setting the 2nd DIV (red border) to a static height of 400px to see if the TABLE within would stretch to 100% height, and it still did not.
然后我发现如果我从每个元素中移除 height：auto; ％height属性，但会产生不必要的副作用：
I then found that if I removed height:auto; from each of the elements, they would follow the 100% height property, but with an unwanted side effect:
正如你在图片中看到的，每个元素现在真的是100％的父元素的高度，迫使底部延伸超出其父代的边界。 （即使在我的第一个例子中，带有绿色边框的最外面的DIV比所需的扩展得更远，因为页面上有另一个兄弟DIV）。注意：仔细查看后，我可以看到，蓝色TABLE元素实际上与其红色DIV父元素不是相同的高度，但仍然超出其边界。我不知道这是否意味着什么，但我注意到了。
As you can see in the image, each element is now truly 100% the height of its parent element, forcing the bottom to extend beyond the boundaries of its parent. (Even in my first example, the outermost DIV with the green border extended farther than desired because there is another sibling DIV above it on the page). NOTE: After looking more carefully, I can see that the blue TABLE element is not actually the same height as its red DIV parent, but it still extends beyond its boundary. I'm not sure if this means anything, but I do notice it.
这将是一个很容易解决的问题
One would think that this would be an easy thing to solve, but despite my efforts, I've had no success.
如果我只保留 height：auto; 删除 100％属性，这根本不会拉伸它们。
If I keep only height:auto; and remove the 100% properties, this does not stretch them at all.
Google和StackOverflow，虽然许多网站涵盖了100％的高度问题，我仍然没有找到一个实际的解决方案。
I have searched for solutions on this via Google and StackOverflow, and although many sites covered 100% height issues, I still haven't found an actual solution.
我目前正在Firefox中测试这个。 >
I am currently testing this in 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>
这篇关于CSS - 如何强制元素到父元素的剩余/可用空间的100％，而不扩展到它？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
