Question

在我看来，这似乎是一个非常业余的问题，但尽管如此，它仍然是令人沮丧的异常现象。

这实际上是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%;

结果如下： enter image description here

如您所见，最外面的DIV遵循100％高度属性，但其余的没有。正如图像注释中暗示的那样，但实际上没有在此图像中显示，我尝试将第二个DIV（红色边框）设置为400px的静态高度，以查看其中的TABLE是否会拉伸到100％高度，但它仍然没有。

然后我发现，如果我从每个元素中删除height:auto;，它们将遵循100％height属性，但会产生不必要的副作用：

enter image description here

正如您在图像中看到的那样，每个元素现在真正是其父元素高度的100％，迫使底部延伸到其父元素的边界之外。（即使在我的第一个例子中，带有绿色边框的最外面的DIV比期望的更远，因为页面上方有另一个兄弟DIV）。注意：仔细观察后，我可以看到蓝色TABLE元素实际上与其红色DIV父元素的高度不同，但它仍然超出了它的边界。我不确定这是否意味着什么，但我确实注意到了。

人们会认为这将是一件容易解决的事情，但尽管我努力，但我没有成功。

如果我仅保留height:auto;并删除100%属性，则根本不会延伸它们。

我已经通过Google和StackOverflow搜索了这方面的解决方案，虽然许多网站覆盖了100％的高度问题，但我仍然没有找到实际的解决方案。

我目前正在Firefox中对此进行测试。

Answer 1

您可以使用绝对定位。

#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>

Answer 2

我相信对此类问题的正确解决方案是使用flexbox。最近，Flexbox在所有现代浏览器中都提供了强大的支持。

为父母使用以下内容

.stretch-items {
  display: flex;
  flex-direction: column;  
}

对于应该增长的项目

.stretch-items .stretch {
   flex-grow: 1;  
}

这里是一个演示它的https://codepen.io/giorgosk/pen/NWWaqPO

CSS - 如何强制元素占用父元素剩余/可用空间的100％而不超出它？

2 个答案: