Question

我有一个带有三个标签和一个页脚的div，问题是如果其中一个标签内容小于视口，则页脚下方会出现一个空白区域。 This is one of the tabs working fine.

And this is what happens when I switch the tab

我需要将div扩展到底部，但我无法找到方法

以下是我的代码：

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

顺便说一句，我使用的是Bootstrap 4

Answer 1

如果您将页眉和页脚设为特定高度，请说40px，那么您可以为您的div min-height: calc(100%-80px)。这将使其占据其父级的完整高度减去页眉和页脚的高度。我为演示添加了背景颜色：

<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 个答案: