问

css3移动端布局

手机用户2402852387 发布于 2022-11-06 09:49

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

1 个回答

这种布局使用 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

2022-11-12 01:53 回答

mobiledu2502927723

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签