CSS - 如何使元素占据父元素剩余/可用空间的100%，而不超出其范围？

Question

CSS - 如何使元素占据父元素剩余/可用空间的100%，而不超出其范围？

11

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

这实际上是一个由两个部分组成的问题的第二部分。第一部分是一个相当常见的问题，涉及使元素拉伸到其父对象的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 的静态高度，以查看其中的表格是否会拉伸到100％的高度，但仍然不行。

然后我发现，如果我从每个元素中删除height:auto;，它们将遵循100%的高度属性，但会产生不需要的副作用： enter image description here

正如您在图像中看到的那样，每个元素现在都是其父元素的100％高度，强制底部超出其父级范围。（即使在我的第一个示例中，具有绿色边框的最外层 DIV 也超出了期望值，因为页面上还有另一个同级 DIV）。注意：经过仔细观察，我可以看到蓝色 TABLE 元素实际上并不与其父级红色 DIV 具有相同的高度，但它仍然超出了其边界。我不确定这意味着什么，但我确实注意到了。

一个人会认为这将是一个容易解决的问题，但尽管我努力过，但并没有成功。如果我仅保留height:auto;并删除100%属性，则根本不会拉伸它们。

我通过 Google 和 StackOverflow 搜索了解决此问题的方法，尽管许多站点都涵盖了 100% 高度问题，但我仍然没有找到实际的解决方案。

我目前正在 Firefox 中测试此功能。

- vertigoelectric

你的结果是可以预料的。height: 100% 表示“父元素的高度”。当你向父元素添加内容时，它会适当地将子元素（仍具有父元素的高度）向下移动（请参见：http://jsfiddle.net/blineberry/rtC9H/）。如果你能解释一下使用 height: 100% 所要达到的效果，我们可能可以更好地帮助你。是用于图片？颜色？也许还有其他方法可以实现。另外，请参见：https://dev59.com/6XVD5IYBdhLWcg3wGXhI - Brent

@Brent - 我知道为什么会发生这种情况。这对我来说从来不是个谜。我正在寻找的是一种避免它发生的方法。我正在寻找一种适当的方法，强制一个元素扩展到足以填满其父元素中剩余的空间，而不使用静态数字。此外，我的问题是一般性的，这意味着我目前没有任何特定的构建需要这个功能。实际上，这并不完全正确。我确实有一个项目可能需要这个功能。它很可能会像我在帖子中所示的示例那样结构化（DIV>DIV>TABLE）。 - vertigoelectric

2个回答

0

我相信像这样的问题的正确解决方案是使用flexbox。随着所有现代浏览器对Flexbox的广泛支持，它已经变得非常流行。

将以下代码用于父容器

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

对于应该增长的项目

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

这里有一个 CodePen 演示 https://codepen.io/giorgosk/pen/NWWaqPO

- GiorgosK

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- LaC · Accepted Answer

你可以使用绝对定位。

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