html5 - 关于CSS布局（不使用JS）

问题描述

问 题

<header></header>
<section></section>
<footer></footer>

1. 头部和底部高度固定（30px），怎么让中间的的section高度自适应剩下的屏幕高度？

2. 当section的高度小于浏览器视窗时，footer在浏览器的底部，当section高度大了视窗时，即出现滚动条时，footer在不固定在视窗底部，而是紧跟在section的后面，只有滚动条拖到section的尾部才看到footer

解决方案

题主可能想问的是有名的Sticky Footer的问题。推荐的做法：

html结构稍作变动，如下。

<div class="wrapper">
    <header></header>
    <section></section>
    <div class="footer_placeholder"></div>
</div>
<footer class="footer">
    <!--页脚-->
</footer>

搭配的css：

html, body{height: 100%;}
.wrapper{
    min-height: 100%;
    margin-bottom: -30px;
}
.footer, .footer_placeholder{height: 30px;}

这个实现方式来源于 Ryan Fait's HTML5 CSS Sticky Footer。如果英文内容看起来费劲，也可以阅读这篇文章。

这篇关于html5 - 关于CSS布局（不使用JS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！