搜尋

首頁  >  問答  >  主體

css3移动端布局

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>
天蓬老师天蓬老师2778 天前471

全部回覆(1)我來回復

  • PHPz

    PHPz2017-04-17 11:19:40

    這種版面使用 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

    回覆
    0
  • 取消回覆