开发者社区> 问答> 正文

css3移动端布局de问题

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

展开
收起
杨冬芳 2016-05-31 10:44:20 1940 0
1 条回答
写回答
取消 提交回答
  • IT从业

    这种布局使用 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 中的效果:

    2019-07-17 19:21:30
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载