顶部、底部定高，中间自适应
<div class="body"><div class="header">div><div class="section"><div class="left">div><div class="right">div>div><div class="footer">div>div>
1.position定位
整个父元素相对定位，导航高固定，内容区域绝对定位，通过定位属性实现高度自适应。
html,body{width: 100%;height: 100%;padding: 0;margin: 0;}.header{height: 80px;background-color: #ccc;}.section{position: absolute;top: 80px;left: 0;right: 0;bottom: 80px;overflow:auto;background-color: #f8f8f9;}.footer{position: absolute;bottom: 0;left: 0;right: 0;height: 80px;background-color: #ccc;} 2. flex 弹性布局
利用 flex flex-direction：column属性，使元素自上往下排列，flex:1占据除规定元素外的所有位置
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;} 顶部定高、左侧导航定宽、右侧内容自适应
1. 定位
父元素相对定位，左侧left绝对定位确定自适应高度并左对齐。右侧right通过绝对定位自适应高度和宽度
html,body{width: 100%;height: 100%;padding: 0;margin: 0;}.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: #888888;position: absolute;left: 0;top: 0;bottom: 0;width: 100px;}.right{background-color: #F5F7F9;position: absolute;top: 0;left: 100px;bottom: 0;right: 0;} 2. float + margin
左侧left使用浮动，浮动元素半脱离文档流，与近邻元素位置重叠但不会与邻近元素内部文档重叠
html,body{width: 100%;height: 100%;padding: 0;margin: 0;}.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: #888888;float: left;width: 100px;height: 100%;}.right{background-color: #F5F7F9;height: 100%;margin-left: 100px;} 3. BFC 布局
左浮动，右产生BFC，利用BFC与float元素重叠的特征
4. flex布局
flex-direction: column布局自上而下，flex:1让section布满除header外的所有区域。section设置flex，默认从左往右排列，flex:1让right布满除left外的所有区域
.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">111div><div class="right">div>div>
div>
1. flex布局
.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;} 2. 定位
.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;
} 3. float + margin
.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;
}
