如何使页脚容器紧跟在内容之后,然后延伸到页面底部?
设置是:
- header-container 高度固定为 150px
- content-container 延伸到里面应该有的内容
- 页脚容器跟随页面其余部分的延伸。
到目前为止,我要么将页脚紧跟在内容之后,然后是空白,要么将页脚粘在底部,内容和页脚之间有空白
最佳答案
实际样式可能会有所不同,具体取决于您是否确定您的页面永远不会足够长以滚动。您通常可以使用 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>
关于html - flex 页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2316501/