css3有什么技巧能让section的高度加上header和footer的高度正好是屏幕的高度
不能用定位的,这关系到安卓的软键盘会把页面向上顶
---css---
.indexPage{
width:100%;
height:100%;
overflow:hidden;
}
.indexPage header{
height:100px;
overflow:hidden;
}
.indexPage section{
width:100%;
overflow:hidden;
}
.indexPage footer{
height:100px;
overflow:hidden;
}
---html---
<article class="indexPage">
<header></header>
<section></section>
<footer></footer>
</article>
PHPz2017-04-17 11:19:40
这种布局使用 flex
再合适不过了。
css
html, body { height: 100%; } body { margin: 0; } article { height: 100%; display: flex; flex-direction: column; text-align: center; } header { height: 50px; background: #ccc; } footer { height: 50px; background: #ccc; } section { flex: 1; background: #eee; }
前缀使用 autoprefixer
自动生成,浏览器的兼容性很理想。下面是 codepen 中的效果:
http://codepen.io/yuezk/pen/NqEqVv