我的目标是让页脚在内容很少时保留在页面底部，如果页面内容很多(需要向下滚动)则移动到所有内容的底部。
我读了这篇文章 Flushing footer to bottom of the page, twitter bootstrap ，尝试了布局和 css，但似乎仍然无法让我的页面正常工作。
这是我的代码布局 - 也许我只是犯了一个小错误？
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
// Header Stuff
</div>
<div class="container">
<div class="jumbotron">
// h2
</div> // end jumbotron
<div class="row">
//ALL OF THE INFORMATIONAL CONTENT
</div> //end row
</div> //end container
<footer class="footer">
//INFORMATION / LINKS
</footer> //end footer
</body>
并且名称更改为 CSS 代码...
html, body {
height: 100%;
}
.container {
min-height: 100%;
}
.row {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
}
最佳答案
我认为，css flexbox 可以帮助您解决这个问题。但是，请注意浏览器支持。
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;
}
演示:http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
点击那里的切换内容按钮查看不同之处。
关于html - CSS - 将页脚刷新到页面底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21447167/