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>
這種版面使用
flex
再適合不過了。前綴使用
autoprefixer
自動生成,瀏覽器的相容性很理想。下面是 codepen 中的效果:http://codepen.io/yuezk/pen/NqEqVv