弹性页脚

Question

如何在内容后直接跟踪页脚容器，然后拉伸到页面底部？

设置为：

• 标题容器固定为150px高度
• 内容容器延伸内容应该是
内容
• 页脚容器在页面的其余部分跟随延伸。

到目前为止，我要么在内容有白色空格后直接使用页脚，要么页脚粘在底部，内容和页脚之间有空格

Answer 1

实际样式可能会有所不同，具体取决于您是否确定您的页面永远不会滚动很长时间。你可以经常使用body标签来实现这个技巧，但它不够灵活，不推荐使用。

这里的想法是创建一个非常长的页脚​​div，并让它包含在包含其余内容的元素中。由于隐藏了父级的溢出，因此将忽略div的实际长度。

这通常显示为平衡底部填充，但在您的情况下不应该需要。

<style>
   html,body,.bigDiv{height:100%}
   .header{height:150px}
   .footer{height:2000px; background-color:green;}
</style>

<div class="bigDiv" style="overflow:hidden;">

    <div class="header"></div>
    <div class="content">
       Content
    </div>
    <div class="footer">
        Footer
    </div>
</div>