如何获得页脚粘到页面的底部，如果主高度小于文档的高度？ https://planbuildr.com/login?skin=purple 目前，我这样做，但我认为这是错误的内页（登录后）页脚是在屏幕下方。
<script>
$(document).ready(function()
{
// Change height of container
if ($("#main").height() < $(document).height())
$("#main").height($(document).height() - 152); // 132
});
</script>
我不知道我是否应该在CSS的唯一解决方案。如果JavaScript是用来检测的高度，我不介意。
HTML代码机身采用PHP代码是这样的：
<div id="container">
<header style="background-color:#3264f2;height:43px">
<?php require_once CB_DIR_UI.$CB['skin'].'/html/header.html'; ?>
</header>
<main id="main" style="width:calc(100% - 300px);margin:20px auto 0 auto;padding:10px;border:7.5px solid #666666;border-radius: 10px;background-color:#f6f7fa;overflow-y:auto">
<?php require_once CB_DIR_UI.$CB['skin'].'/html/'.$CB['template_file']; ?>
</main>
<div class="clear"></div>
<footer style="margin-top:20px">
<?php require_once CB_DIR_UI.$CB['skin'].'/html/footer.html'; ?>
</footer>
</div>
你可以做到这一点只在CSS使用Flexbox的。第二个例子展示它是如何工作的，当内容溢出页面。
body {
margin: 0;
}
main {
display: flex;
flex-direction: column;
height: 100vh;
}
header, section, footer {
padding: 8px;
}
section {
flex: 1;
background: silver;
}<main>
<header>Header</header>
<section>Content</section>
<footer>Footer</footer>
</main> body {
margin: 0;
}
main {
display: flex;
flex-direction: column;
height: 100vh;
}
header, section, footer {
padding: 8px;
}
section {
flex: 1;
background: silver;
}<main>
<header>Header</header>
<section>
Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>
</section>
<footer>Footer</footer>
</main>这可以用CSS，无需JS来实现。
有一些方法可以做到这一点，但我最喜欢的（清洁剂）如下：
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.main-content-wrapper {
flex: 1 0 auto;
}
.footer-wrapper {
flex-shrink: 0;
}<body>
<div class="main-content-wrapper">
Your main content. Pushing the footer down.
</div>
<div class="footer-wrapper">
Your footer content. Down here!
</div>
</body>