我制作了一个页 footer 分，它位于我网页的底部。当我的网页内容小于浏览器视口(viewport)的高度时，我遇到了一个问题，这在页脚和页面末尾之间留下了空白。我试图通过使用这段 css 来解决它。
.footer {
position: absolute;
bottom: 0;
height: 125px;
}
它在我的内容很少的网页上运行完美，但对于大网页，页脚与内容重叠。我按照一些在线教程进行操作，但仍然无法正确完成。
<body class="bg-1">
<div class="container-full">
<div class="container">
...
</div>
</div>
<div class="footer text-center">
...
</div>
</body>
.container-full {
width: 100%;
height: 100%;
padding-top: 70px;
margin: 0 auto 125px;
}
.bg-1 {
background: url(../img/1.png) no-repeat center center fixed;
background-size: cover;
height: 100%;
}
.footer {
position: absolute;
bottom: 0;
height: 125px;
}
我正在使用 Twitter Bootstrap。
最佳答案
您可以尝试以下方法:
html,
body {
height: 100%;
}
.container-full {
table-layout: fixed;
background: #ccc;
display: table;
height: 100%;
width: 100%;
}
.footer {
display: table-footer-group;
background: #2f2f2f;
overflow: hidden;
color: #fff;
width: 100%;
height: 1%;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body class="bg-1">
<div class="container-full">
<div class="container">
<p>Main Content goes here</p>
</div>
<div class="footer text-center">
<p>Footer text goes here..</p>
</div>
</div>
</body>关于css - 将 div 定位在页面或屏幕的底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38518703/