高度布局实现效果
【解决需求】
解决高度布局中部分高度固定，部分高度自适应的问题
解决需求
【实际情况中的应用】
网站顶部导航栏(以及底部栏)固定高度，中间内容主要区域根据屏幕大小自适应
【解决方案】
利用绝对定位中设置位置后内容自适应大小确定中间高度自适应。
1.顶部导航栏和底部栏设置高度固定，并利用绝对定位设置底部栏位置靠底；
2.设置中间部分为绝对定位，距离顶部和底部分别为顶部栏和底部栏的高度，剩下的部分的高度即为浏览区高度减去上下栏高度的差，设置宽度为100%或距离左右分别为0，则除去顶部和底部栏的区域被中间部分铺满；
【代码示例】
html代码：
<body>
<div class="header"></div>
<div class="contain">
shawnJ高度自适应示例
</div>
<div class="foot"></div>
</body>
css代码：
*{
padding: 0;
margin: 0;
}
.header{
width: 100%;
height: 40px;
background: #DC3E3E
}
.foot{
width: 100%;
height: 40px;
background: #222222;
position: absolute;
bottom: 0;
}
.contain{
position: absolute;
top:40px;
bottom: 40px;
left:0;
right:0;
background: #333;
color: #fff;
}
【效果截图】
效果预览
【兼容性检测（此处只考虑chrome和IE）】
ie7+和chrome均能正常使用；
ie6中部自适应高度失效；
【css3中的新探索】
css3中引入了calc()属性，这个看似函数的css3属性能计算四则运算，可以利用其计算百分比和固定值的差值，以此来达到本文部分高度自适应的效果，即height: calc(100% - 80px);
代码如下所示：
html：
<body>
<div class="header"></div>
<div class="main">
ShawnJ的示例2
</div>
<div class="foot"></div>
</body>
CSS代码如下所示：
*{
padding: 0;
margin: 0;
}
.header{
width: 100%;
height: 40px;
background: #DC3E3E;
}
.foot{
width: 100%;
height: 40px;
background: #222;
position: absolute;
bottom: 0;
}
.main{
position: absolute;
width: 100%;
height: calc(100% - 80px);
background: #333;
color:#fff;
}
兼容性：IE9+，chrome19+
效果与之前相同。
【个人思考】
目前为止为CSS常用的自适应高度布局，可灵活应用于多种场景。接下来是我个人对css布局中自适应布局的一些新的尝试，如有什么不对请大家多多指教。
解决方案探索：
利用box-sizing:border-box使得padding不影响定义的宽高；
1.给中间主体部分添加一个外层，并绝对定位覆盖整个页面，设置其上下内边距分别为顶栏和底栏的高度
2.设置中间主体部分高度为100%，则中间高度为浏览器高度减去上下边栏的高度。
兼容性检测：适用于IE6+
代码如下：
<body>
<div class="header"></div>
<div class="wrap">
<div class="main">
ShawnJ的示例3
</div>
</div>
<div class="foot"></div>
</body>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header{
width: 100%;
height: 40px;
background: #DC3E3E;
}
.wrap{
position: absolute;
top: 0;
width: 100%;
height: 100%;
padding: 40px 0;
}
.main{
width: 100%;
height: 100%;
background: #333;
}
.foot{
width: 100%;
height: 40px;
background: #222;
position: absolute;
bottom: 0;
}
以上为个人总结的高度布局方式，第一次写简书，当作是自己学习前端路上的一些笔记吧。有什么不对的地方希望大家多多指正，如果有更好的方案欢迎大家指出。
希望能在评论里学到更多东西~~~
(•̀ᴗ•́)و (•̀ᴗ•́)و (•̀ᴗ•́)و
网友评论