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

Question

Code: 码：

HTML HTML

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

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

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

The searchBox is not important. searchBox不重要。 I just put it there to show that there is something above my other table ( tableData ). 我只是把它放在那儿，以表明在我的其他表（ tableData ）之上有东西。

What I am trying to achieve is to get tableData to fill the rest of the screen height visible so no scroll bars are required. 我想要达到的目的是使tableData填充可见的其余屏幕高度，因此不需要滚动条。

I have researched and come across multiple solutions but none of these seem to work: 我已经研究并遇到了多种解决方案，但是这些解决方案似乎都不起作用：

1. Set 'vh' property 1.设置“ vh”属性

Even though this goes off the viewport dimensions it's pretty good. 即使这超出了视口尺寸，也还是不错的。 However, I have a tabbed UI with all tabs having tableData displayed but at different positions on the page. 但是，我有一个选项卡式UI，其中所有选项卡都显示了tableData但是在页面上的不同位置。 This means that switching from tab to tab, tableData does not have time to render the new dimensions. 这意味着从一个选项卡切换到tableData选项卡， tableData没有时间呈现新尺寸。 Example sketch below: 下面的示例草图：

So if I base the height of tableData on the image on the left where the content above is smaller, then the height of tableData will be too big and over-stretch on the other tab where the position of it has changed 因此，如果我将tableData的高度基于上面内容较小的左侧图像上，则tableData的高度将太大而在其他位置已更改的选项卡上过度拉伸

2. Using absolute positioning 2.使用绝对定位

I immediately wrote this off as I also want my page to be responsive upon different devices and I understand that using absolute positioning can mess that up 我立即写下来，因为我也希望我的页面能够对不同的设备做出响应，并且我知道使用绝对定位会导致混乱

3. Flexbox 3. Flexbox

I have been following this post for this method: Make a div fill the height of the remaining screen space 我一直在关注此方法的帖子：使div填充剩余屏幕空间的高度

I have tried this approach but it removed all of my other CSS I had on the page. 我已经尝试过这种方法，但是它删除了我在页面上拥有的所有其他CSS。

What is the best way to achieve what I want? 实现我想要的最好的方法是什么？

Answer 1

If you want to create the height of your divs with %'s , then all you have to do is set your html to 100% . 如果要使用%'s创建divs的高度，则只需将html设置为100% 。

Here's how to do it: 方法如下：

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

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

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

Here's the jsfiddle . 这是jsfiddle 。

Update 更新
added margin: 0; 增加的margin: 0; to html and body and updated the jsfiddle 到html和body并更新了jsfiddle

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-10-07 19:04:06

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-10-07 19:04:06

解决方案1
1 已采纳 2015-10-07 19:04:06