css3移动端布局de问题-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

css3移动端布局de问题

杨冬芳 2016-05-31 10:44:20 1292

screenshot
如上图css3有什么技巧能让section的高度加上header和footer的高度正好是屏幕的高度
不能用定位的这关系到安卓的软键盘会把页面向上顶

问题css css布局问题 移动端问题 css移动端 移动端布局问题
分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:21:30

    这种布局使用 flex 再合适不过了。

    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 中的效果:

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

相似问题
最新问题
推荐课程