如果div的高度小于视口，则扩展其高度

Question

I have a div with three tabs, and a footer, the problem is that if one of the tab's content is smaller than the viewport a blank space appears under the footer. 我有一个包含三个选项卡和一个页脚的div，问题是，如果选项卡的内容之一小于视口，则在页脚下方会出现空白。 This is one of the tabs working fine. 这是工作正常的选项卡之一。

And this is what happens when I switch the tab 这就是我切换选项卡时发生的情况

I need that div to stretch to the bottom, but I can't find a way to do it 我需要那个div延伸到底部，但是我找不到办法

The following is my code: 以下是我的代码：

<html>
    <head>
        <style>
html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }
        </style>
    </head>
    <body style="padding-top: 3.5rem;">
        <navbar>
            Navbar
        </navbar>
        <div class="container" style="width:100%;display:block;overflow:auto;">
            Tabs and everything else
        </div>
        <footer class="py-5 bg-dark" style="position: relative;bottom: 0;width: 100%;">
            Footer
        </footer>
    </body>
</html>

By the way, I'm using Bootstrap 4 顺便说一句，我正在使用Bootstrap 4

Answer 1

If you give your header and footer a specific height, say 40px , then you can give your div a min-height: calc(100%-80px) . 如果为页眉和页脚指定特定的高度（例如40px ，则可以为div设置min-height: calc(100%-80px) 。 This will make it occupy the full height of its parent minus the height of the header and footer. 这将使其占据其父级的整个高度减去页眉和页脚的高度。 I added the background colors just for demo: 我为演示添加了背景色：

 <html> <head> <style> html, body { margin: 0; padding: 0; height: 100%; width: 100%; } </style> </head> <body style="padding-top: 3.5rem;"> <navbar style="background-color: yellow; display: block; height: 40px;"> Navbar </navbar> <div class="container" style="width: 100%; min-height: calc(100% - 80px); display: block; overflow: auto; background-color: cyan;"> Tabs and everything else </div> <footer class="py-5 bg-dark" style="position: relative; bottom: 0; width: 100%; height: 40px; background-color: yellow;"> Footer </footer> </body> </html>

如果div的高度小于视口，则扩展其高度

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-02-13 04:22:45

如果div的高度小于视口，则扩展其高度

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-02-13 04:22:45

解决方案1
0 已采纳 2018-02-13 04:22:45