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

问题描述 投票：10回答：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%;

结果如下：“在此处输入图像描述”

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

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

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9zYUFKby5wbmcifQ==” alt =“在此处输入图像描述”>“ >>

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

一个人会[[认为

，这将是一件容易解决的事情，但是尽管我付出了很多努力，但我还是没有成功。如果仅保留height:auto;并删除100%属性，则根本不会拉伸它们。

我已经通过Google和StackOverflow搜索了有关此问题的解决方案，尽管许多站点都涉及100％的高度问题，但我仍然没有找到实际的解决方案。

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

在我看来，这似乎是一个非常业余的问题，但仍然是一个令人沮丧的异常现象。这实际上是两部分问题的第二部分。第一部分是一个相当普通的部分，...

html css height
2个回答
13
投票
您可以使用绝对定位。
0
投票
我相信对此类问题的正确解决方案是使用flexbox。 Flexbox最近在所有现代浏览器中都提供了强大的支持。
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.