CSS经典布局之高度布局

高度布局实现效果

【解决需求】
解决高度布局中部分高度固定，部分高度自适应的问题

解决需求

【实际情况中的应用】
网站顶部导航栏(以及底部栏)固定高度，中间内容主要区域根据屏幕大小自适应

【解决方案】
利用绝对定位中设置位置后内容自适应大小确定中间高度自适应。
1.顶部导航栏和底部栏设置高度固定，并利用绝对定位设置底部栏位置靠底；
2.设置中间部分为绝对定位，距离顶部和底部分别为顶部栏和底部栏的高度，剩下的部分的高度即为浏览区高度减去上下栏高度的差，设置宽度为100%或距离左右分别为0，则除去顶部和底部栏的区域被中间部分铺满；

【代码示例】
html代码：

    

    

        shawnJ高度自适应示例
    
    

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：

    

    

        ShawnJ的示例2
    
    

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+

代码如下：

    

    

        

            ShawnJ的示例3
        
    
    

*{
    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;
}

以上为个人总结的高度布局方式，第一次写，当作是自己学习前端路上的一些笔记吧。有什么不对的地方希望大家多多指正，如果有更好的方案欢迎大家指出。
希望能在评论里学到更多东西~~~
(•̀ᴗ•́)و (•̀ᴗ•́)و (•̀ᴗ•́)و