我正在为个人网站创建一个新布局。
我正在使用 Twitter Bootstrap 3，我的初始布局是使用 as example 制作的 “带粘性页脚的 Bootstrap ”示例 ( http://getbootstrap.com/examples/sticky-footer-navbar/ )
这是我的 html:
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page navigation -->
<nav id="nav-container" class="navbar navbar-default container" role="navigation">
<div class="container">
<!-- Here I put a very normal Bootstrap 3 navbar -->
</div>
</nav>
<!-- Begin page content -->
<div id="main-container" class="container">
<!-- All my content goes here! -->
</div>
</div>
<!-- Begin page footer -->
<footer id="footer" class="container">
<div class="container">
</div>
</footer>
</body>
粘性页脚 CSS:
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -100px;
/* Pad bottom by footer height */
padding: 0 0 100px;
}
/* Set the fixed height of the footer here */
#footer {
height: 100px;
}
以及我的布局的自定义样式:
body {
/* Body's background will be grey */
background-color: #C0C0C0;
}
#main-container {
/* A box where I'll put the content will be white */
background-color: #FFFFFF;
}
#wrap {
height: 100%;
min-height: 100%;
}
#main-container {
min-height: 100%;
height: 100%;
}
此代码生成此布局:
但是，如您所见，div #main-container 不会增长到布局的末尾。
div 保持他内容的高度。
我想要的是这个 div 总是填满整个页面，像这样:
互联网上的许多解决方案都让我将 min-height 固定为一些测试值，但是这样
我将无法保持我的网站响应(保持我的布局对我来说非常重要
始终响应，这是我使用 Bootstrap 3 的主要原因)。
其他解决方案是使用 javascript 计算 div 高度。我个人不喜欢 这个解决方案。我希望我只能通过使用 CSS 来解决这个问题。
有人知道如何解决这个问题吗？
最佳答案
只要您处理百分比，您的网站就会响应。所以使用 min-height:100% 确实解决了你的问题，这只是 CSS。如果您不希望此处涉及 Javascript，那就是要走的路。
参见 JS Fiddle DEMO 。您的容器将填满整个页面。
#main-container {
min-height: 100%;
background: #fff;
}
关于html - 使容器 div 用粘性页脚填充所有布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21026725/