在页面底部显示页脚，即使没有足够的内容
在页面底部显示页脚，即使没有足够的内容
提问于 2018-05-29 10:24:47
我尝试在页面底部显示页脚，即使没有内容，它似乎也可以工作。但是，您必须滚动才能看到页脚。它就在你滚动之后，而不是立即在页面的底部。我不知道我做错了什么。下面是我的代码：
<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%;
}回答 3
Stack Overflow用户
回答已采纳
发布于 2018-05-29 10:51:32
这将使页脚始终显示在页面的底部。我们使页脚包装器具有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>标记以使内容扩展到页面。
Stack Overflow用户
发布于 2018-05-29 11:34:51
您可以尝试使用flex布局方法。
<body class="Site">
<header>...</header>
<main class="Site-content">...</main>
<footer>...</footer>
</body>.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}Stack Overflow用户
发布于 2018-05-29 11:19:58
获取窗口的高度(比如w)和页脚的高度(比如f )。然后将内容框的最小高度设置为(w-f)。这样，如果没有内容，页脚将始终出现在底部，如果有内容，将出现在内容之后。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50575505
复制相关文章
相似问题