伸展页脚

Question

如何让页脚容器紧跟在内容之后，然后伸展到页面的底部？

的设置是：

• 头容器是固定的150像素高度
• 与任何内容应内部
• 页脚容器遵循用于在网页的其余部分绵延内容容器延伸。

到目前为止，我要么在与空格内容后直接页脚，或贴在底部的内容和页脚之间的空白页脚

Answer 1

实际的造型可以根据变化是否你确信你的网页永远不会滚动足够长的时间。你可以经常使用身体标签本身的技巧，但它不太灵活，不推荐。

这里的想法是创建一个很长的页脚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>