<div class="body">
<div class="header"></div>
<div class="section">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>
复制代码
整个父元素相对定位,导航高固定,内容区域绝对定位,经过定位属性实现高度自适应。html
html,body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.body{
position: relative;
height: 100%;
}
.header{
height: 80px;
background-color: #ccc;
}
.section{
position: absolute;
top: 80px;
left: 0;
right: 0;
bottom: 80px;
background-color: #f8f8f9;
}
.footer{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background-color: #ccc;
}
复制代码
利用 flex flex-direction:column属性,使元素自上往下排列,flex:1占据除规定元素外的全部位置bash
html,body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.body{
height: 100%;
background-color: #808695;
display: flex;
/*设置排列顺序*/
flex-direction: column;
}
.header{
height: 80px;
background-color: #ccc;
}
.section{
flex: 1;
background-color: #f8f8f9;
}
.footer{
height: 80px;
background-color: #dcdee2;
}
复制代码
父元素相对定位,左侧left绝对定位肯定自适应高度并左对齐。右侧right经过绝对定位自适应高度和宽度布局
.body{
height: 100%;
position: relative;
background-color: #F5F7F9;
}
.header{
height: 80px;
background-color: #515A6E;
}
.section{
background-color: #F5F7F9;
position: absolute;
left: 0;
top: 80px;
bottom: 0;
right: 0;
}
.left{
background-color: #fff;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100px;
}
.right{
background-color: #F5F7F9;
position: absolute;
top: 0;
left: 100px;
bottom: 0;
right: 0;
}
复制代码
左侧left使用浮动,浮动元素半脱离文档流,与近邻元素位置重叠但不会与邻近元素内部文档重叠flex
.body{
height: 100%;
position: relative;
}
.header{
height: 80px;
background-color: #515A6E;
}
.section{
background-color: #afc7de;
position: absolute;
left: 0;
top: 80px;
bottom: 0;
right: 0;
}
.left{
background-color: #fff;
float: left;
width: 100px;
height: 100%;
}
.right{
background-color: #F5F7F9;
height: 100%;
margin-left: 100px;
}
复制代码
左浮动,右产生BFC,利用BFC与float元素重叠的特征ui
flex-direction: column布局自上而下,flex:1让section布满除header外的全部区域。section设置flex,默认从左往右排列,flex:1让right布满除left外的全部区域spa
.body{
height: 100%;
display: flex;
flex-direction: column;
}
.header{
height: 80px;
background-color: #515A6E;
}
.section{
background-color: #afc7de;
flex: 1;
display: flex;
}
.left{
background-color: #fff;
width: 100px;
}
.right{
flex: 1;
background-color: #F5F7F9;
}
复制代码
<div class="body">
<div class="header"></div>
<div class="section">
<div class="left"></div>
<div class="center">111</div>
<div class="right"></div>
</div>
</div>
复制代码
.header{
height: 80px;
background-color: #515A6E;
}
.section{
background-color: #afc7de;
flex: 1;
display: flex;
}
.left{
background-color: #fff;
width: 100px;
}
.center{
flex: 1;
background-color: #F5F7F9;
}
.right{
width: 100px;
background-color: #fff;
}
复制代码
.body{
height: 100%;
position: relative;
}
.header{
height: 80px;
background-color: #515A6E;
}
.section{
position: absolute;
width: 100%;
left: 0;
top: 80px;
bottom: 0;
right: 0;
background-color: #afc7de;
}
.left{
position: absolute;
left: 0;
top: 0;
bottom: 0;
background-color: #fff;
width: 100px;
}
.center{
height: 100%;
margin-left: 100px;
margin-right: 100px;
background-color: #F5F7F9;
}
.right{
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 100px;
background-color: #fff;
}
复制代码
section 在left和right元素后3d
.body{
height: 100%;
position: relative;
}
.header{
height: 80px;
background-color: #515A6E;
}
.section{
position: absolute;
width: 100%;
left: 0;
top: 80px;
bottom: 0;
right: 0;
background-color: #afc7de;
}
.left{
float: left;
background-color: #fff;
width: 100px;
height: 100%;
}
.center{
height: 100%;
margin-right: 100px;
margin-left: 100px;
background-color: #F5F7F9;
}
.right{
float: right;
height: 100%;
width: 100px;
background-color: #fff;
}
复制代码