css3移动端布局
天蓬老师
天蓬老师 2017-04-17 11:17:40
0
1
473
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>
天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回覆(1)
PHPzhong

這種版面使用 flex 再適合不過了。

csshtml,
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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板