html - flex 页脚

Question

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

设置是:

• header-container 高度固定为 150px
• content-container 延伸到里面应该有的内容
• 页脚容器跟随页面其余部分的延伸。

到目前为止，我要么将页脚紧跟在内容之后，然后是空白，要么将页脚粘在底部，内容和页脚之间有空白

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>