我试图在页面底部显示页脚,即使没有内容也似乎有效.但是,您必须滚动才能看到页脚.它是在您滚动后立即而不是在页面底部.我无法弄清楚我做错了什么.这是我的代码： body div id="root
<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%;
}
这应该使页脚始终显示在页面的底部.我们使页脚包装器具有位置：绝对并使用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>标签使内容扩展页面.