CSS学习之——上下固定中间自适应滚动布局

html布局如下:

<div class="container">
  <header class="header">HEADER</header>
  <main class="content">MAIN</main>
  <footer class="footer">FOOTER</footer>
</div>

效果

方法一:利用vh视图单位

.container {
  min-height: 100vh;
  height: 100%;
}
.header {
  height: 40px;
}
.footer {
  height: 40px;
}
.content {
  height: -webkit-calc(100vh - 80px);
  height: calc(100vh - 80px);
  overflow-y: scroll;
}
  • 已知上下栏高度,计算中间部分应该占据的空间

利用flex布局

.container {
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
  width:100%;
  height:100%;
}
.header,.footer{
  height:40px;
}
.content {
  -webkit-box-flex:1;
  -webkit-flex:1;
  -ms-flex:1;
  flex:1;
  overflow-y: scroll;
}
  • 注意兼容,注意减号两边空格

利用position+absolute布局

.container {
  position: relative;
  height: 100%;
}
.header{
  position: absolute;
  left: 0;
  top: 0;
  height:40px;
  width: 100%;
}
.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  height:40px;
  width: 100%;
}
.content {
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  width: 100%;
}

利用position+fixed布局

.container {
  position: relative;
  height: 100%;
}
.header{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  height:40px;
  width: 100%;
}
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1000;
  height:40px;
  width: 100%;
}
.content {
  width: 100%;
  min-height: 100%;
  padding: 40px 0;
}

 上一篇
Javascript的变量、对象及函数(重要基础知识总结) Javascript的变量、对象及函数(重要基础知识总结)
[目录] 参考书籍 对象 引用类型 函数Function 变量、作用域和内存 变量提升和函数提升 参考书籍 《JavaScript高级程序设计(第三版)》 对象 简单数据类型: 数字、字符串、布尔值、null、undefined 复杂
2018-07-23
下一篇 
变量、作用域和内存问题 变量、作用域和内存问题
参考资料 JS类型转换(强制和自动的规则) 《JavaScript高级程序设计》 变量 两种类型:基本类型值和引用类型值 基本类型:Undefined、Null、Boolean、Number、String 引用类型值:对象 检测类型
2018-07-11
  目录