Question

我试图在页面底部显示页脚，即使没有内容也似乎有效。但是，您必须滚动才能看到页脚。它是在您滚动后立即而不是在页面底部。我无法弄清楚我做错了什么。这是我的代码：

<body>
    <div id="root">
        <div class="app">
            <div class="wrapper">
                <div class="nav">
                    <div>
                        <header class="header">
                            <div>
                                <ul>
                                    <li>Title</li>
                                </ul>
                            </div>
                            <div>
                                <ul>
                                    <li>About</li>
                                </ul>
                            </div>
                        </header>
                    </div>
                </div>
            </div>
            <div class="footerWrap">
                <div>
                    <footer>
                        <div class="copyright">
                            <div class="text">© 2018 Footer</div>
                        </div>
                    </footer>
                </div>
            </div>
        </div>
    </div>
</body>

样式：

html, body, #root, .app {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    margin-bottom: -100px;
    padding-bottom: 100px;
}
.footerWrap {
    background-color: green;
    padding-top: 15px;
    width: 100%;
}

Answer 1

这应该使页脚始终显示在页面的底部。我们使页脚包装器具有position: absolute并使用bottom: 0将其推到底部。 left: 0删除水平滚动条。

html {
  position: relative;
  min-height: 100%;
}
.footerWrap {
  position: absolute;
  background-color: green;
  width: 100%;
  bottom: 0;
  left: 0;
}

这是一个有效的codepen。我删除了所有多余的div以使其更易于阅读，添加<p>标签以使内容扩展页面。

Answer 2

你可以试试flex布局方法。

HTML

<body class="Site">
  <header>...</header>
  <main class="Site-content">...</main>
  <footer>...</footer>
</body>

CSS

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

Answer 3

获取窗口的高度（比如w）和页脚的高度（比如f）。然后将内容框的最小高度设置为（w-f）。这样，如果没有内容，页脚将始终显示在底部，如果有内容，则会在内容后显示。

即使内容不足，也会在页面底部显示页脚

3 个答案: