Question

代码：

HTML

<body>
    <header>
        "..."
    </header>

    <main>
        <div class="searchBox">
            <table>
                "..."
            </table>
        </div>

        <div class="tableData">
            <table>
                "..."
            </table>
        </div>
    </main>
</body>

searchBox并不重要。我只是把它放在那里，表明我的另一张桌子上方有一些东西（tableData）。

我想要实现的是让tableData填充剩余的屏幕高度，这样就不需要滚动条了。

我已经研究并遇到过多种解决方案，但这些解决方案似乎都不起作用：

1。设置'vh'属性

即使这取消了视口尺寸，它仍然相当不错。但是，我有一个标签式用户界面，所有标签都显示tableData但在页面上的不同位置。这意味着从标签切换到标签，tableData没有时间呈现新尺寸。示例草图如下：

因此，如果我将tableData的高度基于上面内容较小的左侧图像，那么tableData的高度将太大并且在另一个标签上过度拉伸它的位置已经改变

2。使用绝对定位

我立刻把它写下来，因为我也希望我的页面能够响应不同的设备而且我明白使用绝对定位可以搞砸了

第3。 Flexbox的

我一直在关注此方法的帖子： Make a div fill the height of the remaining screen space

我尝试过这种方法，但它删除了我在页面上的所有其他CSS。

达到我想要的最佳方式是什么？

Answer 1

如果您想使用divs创建%'s的高度，那么您只需将html设置为100%。

以下是如何操作：

html, body {
    height: 100%;
    margin: 0;
}

#searchBox {
    background-color: red;
    width: 100%;
    height: 20%;
}

#tableData {
    background-color: blue;
    width: 100%;
    height: 80%;
}

这里是jsfiddle。

<强>更新
将margin: 0;添加到html和body并更新了jsfiddle

设置div以填充剩余的屏幕高度

1 个答案: