>  Q&A  >  본문

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>
天蓬老师天蓬老师2764일 전447

모든 응답(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
  • 취소회신하다