CSS全屏布局的5种方式 - 小火柴的蓝色理想
程序员文章站
2022-05-13 15:20:02
...
前面的话
全屏布局在实际工作中是很常用的,比如管理系统、监控平台等。本文将介绍关于全屏布局的5种思路
思路一: float
【1】float + calc
通过calc()函数计算出.middle元素的高度,并设置子元素高度为100%
style>
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;}
style>
div class="parent" id="parent" style="background-color: lightgrey;">
div class="top" style="background-color: lightblue;">
p>topp>
div>
div class="middle" style="background-color: pink;">
div class="left" style="background-color: orange;">
p>leftp>
div>
div class="right" style="background-color: lightsalmon;">
div class="right-in">
p>rightp>
div>
div>
div>
div class="bottom" style="background-color: lightgreen;">
p>bottomp>
div>
div>
【2】float + absolute + (fix)
通过增加结构来提高兼容性,.middle元素设置100%的高度,.top和.bottom设置absolute覆盖在.middle上
style>
body,p{margin: 0;}
body,html,.parent{height: 100%;}
.top,.bottom{
position: absolute;
height:50px;
left: 0;
right: 0;
}
.top{top: 0;}
.bottom{bottom: 0;}
.middleWrap{
height: 100%;
overflow: hidden;
}
.middle{
overflow: hidden;
height: 100%;
margin: 50px 0;
}
.left{
float: left;
width: 100px;
margin-right: 20px;
height: 100%;
}
.right{
overflow: auto;
height: 100%;
}
.right-in{
height: 1000px;
}
style>
div class="parent" id="parent" style="background-color: lightgrey;">
div class="top" style="background-color: lightblue;">
p>topp>
div>
div class="middleWrap">
div class="middle" style="background-color: pink;">
div class="left" style="background-color: orange;">
p>leftp>
div>
div class="right" style="background-color: lightsalmon;">
div class="right-in">
p>rightp>
div>
div>
div>
div>
div class="bottom" style="background-color: lightgreen;">
p>bottomp>
div>
div>
思路二: inline-block
【1】inline-block + calc
style>
body,p{margin: 0;}
body,html,.parent{height: 100%;}
.middle{
height: calc(100% - 100px);
font-size: 0;
}
.left,.right{
display: inline-block;
vertical-align: top;
font-size: 16px;
}
.left{
width: 100px;
margin-right: 20px;
height: 100%;
}
.right{
width: calc(100% - 120px);
height: 100%;
overflow: auto;
}
.right-in{
height: 1000px;
}
.top,.bottom{height: 50px;}
style>
div class="parent" id="parent" style="background-color: lightgrey;">
div class="top" style="background-color: lightblue;">
p>topp>
div>
div class="middle" style="background-color: pink;">
div class="left" style="background-color: orange;">
p>leftp>
div>
div class="right" style="background-color: lightsalmon;">
div class="right-in">
p>rightp>
div>
div>
div>
div class="bottom" style="background-color: lightgreen;">
p>bottomp>
div>
div>
【2】inline-block + absolute + (fix)
style>
body,p{margin: 0;}
body,html,.parent{height: 100%;}
.top,.bottom{
position: absolute;
left: 0;
right: 0;
height: 50px;
}
.top{top: 0;}
.bottom{bottom: 0;}
.middleWrap{
height: 100%;
font-size: 0;
overflow: hidden;
}
.middle{
position: relative;
height: 100%;
margin: 50px 0;
overflow: hidden;
}
.left,.rightWrap{
display: inline-block;
vertical-align: top;
font-size: 16px;
}
.left{
position: absolute;
width: 100px;
margin-right: 20px;
height: 100%;
}
.rightWrap{
width: 100%;
height: 100%;
}
.right{
height: 100%;
margin-left: 120px;
overflow: auto;
}
.right-in{
height: 1000px;
}
style>
div class="parent" id="parent" style="background-color: lightgrey;">
div class="top" style="background-color: lightblue;">
p>topp>
div>
div class="middleWrap">
div class="middle" style="background-color: pink;">
div class="left" style="background-color: orange;">
p>leftp>
div>
div class="rightWrap">
div class="right" style="background-color: lightsalmon;">
div class="right-in">
p>rightp>
div>
div>
div>
div>
div>
div class="bottom" style="background-color: lightgreen;">
p>bottomp>
div>
div>
思路三: table
水平方向子元素的间距可以用border实现。所有浏览器都不支持给table-cell元素设置overflow属性。firefox和IE11浏览器不支持给table-cell元素的设置100%高度的子元素设置overflow属性
style>
body,p{margin: 0;}
body,html,.parent{height: 100%;}
.top,.bottom{
position: absolute;
width: 100%;
height: 50px;
}
.bottom{bottom: 0;}
.middleWrap{
height: 100%;
overflow: hidden;
}
.middle{
width: 100%;
height: 100%;
display: table;
margin: 50px 0;
table-layout: fixed;
}
.left{
display: table-cell;
width: 120px;
border-right: 20px solid lightgray;
}
.rightWrap{
display: table-cell;
height: 100%;
}
.right{
height: 100%;
overflow: auto;
}
.right-in{
height: 1000px;
}
style>
div class="parent" id="parent" style="background-color: lightgrey;">
div class="top" style="background-color: lightblue;">
p>topp>
div>
div class="middleWrap">
div class="middle" style="background-color: pink;">
div class="left" style="background-color: orange;">
p>leftp>
div>
div class="rightWrap">
div class="right" style="background-color: lightsalmon;">
div class="right-in">
p>rightp>
div>
div>
div>
div>
div>
div class="bottom" style="background-color: lightgreen;">
p>bottomp>
div>
div>
思路四: absolute
style>
body,p{margin: 0;}
body,html,.parent{height: 100%;}
.top,.middle,.bottom{
position: absolute;
left声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章
相关视频
上一篇: html中的有序列表和无序列表
下一篇: javascript中事件的解析(详细)