我正在使用 Twitter Bootstrap 的“粘性页脚”CSS 来确保我的页脚出现在页面底部。如何让我的内容(示例中的蓝色 div)一直延伸到页脚(示例中的黄色 div)？我试过将 .content 设置为 100% 高度，但这没有任何效果。
我的 CSS
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.content {
height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
我的 HTML
<body>
<div class="header">This is my header</div>
<div class="content">This is my content</div>
<div class="footer">This is my footer</div>
</body>
示例: http://jsfiddle.net/pjktqnmo/1/
引用: http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css
更新:我的页眉包含我的页面标题，因此页眉的高度因页面而异。
最佳答案
这是一个没有使用 position 属性的解决方案。
请看下面的片段:
html, body {
height: 100%;
margin: 0;
color:grey;
}
.header {
background-color:red;
}
.content {
min-height: 100%;
margin-bottom: -60px; /* equal to footer height */
background-color:blue
}
.content:after {
content:"";
display: block;
}
.footer, .content:after {
height: 60px;
}
.footer {
background: yellow;
}<body>
<div class="header">This is my header</div>
<div class="content">This is my content</div>
<div class="footer">This is my footer</div>
</body>更多信息在这里:sticky footer
更新的答案 基于与 OP 的讨论，其中 OP 声明不想要垂直滚动条，因此下面是一个解决方案:
我做了什么？使您的 div .header 成为 div .content 的子级，关于我上面的第一个代码段，CSS 的更改为 0。
html, body {
height: 100%;
margin: 0;
color:grey;
}
.header {
background-color:red;
}
.content {
min-height: 100%;
margin-bottom: -60px; /* equal to footer height */
background-color:blue
}
.content:after {
content:"";
display: block;
}
.footer, .content:after {
height: 60px;
}
.footer {
background: yellow;
}<div class="content">
<div class="header">This is my header</div>
This is my content
</div>
<div class="footer">This is my footer</div>关于html - 如何使内容 div 从页眉 div 延伸到页脚 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26558095/