<分区>
html - CSS - 即使内容不足，也将页脚放在页面底部
使用 HTML/CSS，我需要将 footer 放在页面的 bottom即使没有没有足够的内容。
如果有很多内容导致滚动，很容易实现。当内容不足时就会出现问题，因为在这种情况下，页脚会上升。
这里有一张图片可以更清楚地说明这一点:
我有以下起始代码:
CSS
body {
margin: 0;
}
#header, #content, #footer {
padding: 10px;
}
#header {
height: 100px;
background-color: #abcdef;
}
#content {
bottom: 100px;
left: 0;
right: 0;
background-color: #F63;
overflow: auto;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100px;
background-color: #abcdef;
}
HTML
<div id="header">
There is the Header
</div>
<div id="content">
hello world<br/>
hello world<br/>
hello world<br/>
hello world<br/>
hello world<br/>
hello world<br/>
hello world<br/>
hello world<br/>
hello world<br/>
hello world<br/>
hello world<br/>
hello world<br/>
hello world<br/>
hello world<br/>
hello world<br/>
</div>
<div id="footer">
There is the Footer
</div>
Jsfiddle 预览:https://jsfiddle.net/bk5ow9us/ (尝试调整窗口的高度)
关于如何实现这一点有什么想法吗？
重要
I need a working solution also for IE (ver >= 11), not just FF and Chrome.
最佳答案
如果您愿意，可以使用 flexbox 粘性页脚布局。
虽然我会使用 min-height: 100vh; 而不是 height: 100%;
html, body {
min-height: 100vh;
}
body {
display: flex;
flex-direction: column;
margin: 0;
}
.content {
/* Include `0 auto` for best browser compatibility. */
flex: 1 0 auto;
}
.header, .footer {
background-color: grey;
color: white;
}<div class="header">
<h2>Header</h2>
</div>
<div class="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
</div>
<div class="footer">
<h4>Footer</h4>
</div>关于html - CSS - 即使内容不足，也将页脚放在页面底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43477923/