好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

CSS全屏布局的5种方式_html/css_WEB-ITnose

× 目录 [1]float [2]inline-block [3]table [4]absolute [5]flex [6]总结

前面的话

  全屏布局在实际工作中是很常用的,比如管理系统、监控平台等。本文将介绍关于全屏布局的5种思路

思路一: float

【1】float + calc

  通过calc()函数计算出.middle元素的高度,并设置子元素高度为100%

 body,p{margin: 0;}body,html,.parent{height: 100%;}.middle{    overflow: hidden;    height: calc(100% - 100px);}.left{    float: left;    width: 100px;    margin-right: 20px;    height: 100%;}.right{    overflow: auto;    height: 100%;}.right-in{    height: 1000px;}.top,.bottom{height:50px;}  

top

查看更多关于CSS全屏布局的5种方式_html/css_WEB-ITnose的详细内容...

  阅读:32次