上下固定，中间自适应

    5月初开始实习了，第一份正儿八经的工作，web前段对于我来说还有很长很长的路要走，工作了差不多两周，一直在解决各种css布局的问题，然而我发现最近学到的东西转瞬即忘，跟没学似的，再敲一遍又敲不出来了，真是让我对自己的智商产生了怀疑，这怎么可以！所以开个博客记录、总结一下自己工作中的收获，留下一些我存在的痕迹哈哈o(^▽^)o~有看到的大神发现了我的错只要你愿意觉得我还有得救就请不要客气地指点我吧！现在我是菜鸟，总有一天我是大牛，加油加油！

    我记得我的第一个工作任务是css布局：上下固定，中间自适应布局。主体页面不出现滚动条，中间内容溢出则在中间部分自动出现滚动条。第一个任务，话说还真挺紧张的，务必要好好表现啊！所以查了很多资料，我在这儿总结一下。

    说起来这个布局真的也算是很经典了。整个布局的特点是中间高度不固定，这也是主要的问题所在，这一点解决了就基本上完成了。我首先想到的就是position定位。相信大家也是。

　　方法一：position：absolute定位  

    主体思路：　　　　  

 1 html,body{
 2 　　height:100%;}
 3 .head{
 4 　　height:100px;
 5 　　width:100%;
 6 　　position:absolute;
 7 　　top:0;}
 8 .body{
 9 　　width:100%;
10 　　position:absolute;
11 　　top:100px;
12 　　bottom:100px;
13 　　overflow:auto;     //滚动条
14 }
15 .foot{
16 　　height:100px;
17    width:100%；
18 　　position:absolute;
19 　　bottom:0;
20 }

    这个方法IE7以上的浏览器都兼容。IE6兼容出现问题，表现为出现了滚动条，可以选择求助html,body{overflow:hidden;}，但不能完美解决问题，具体解决方案请自行百度o(^▽^)o。

    用这个方法时要注意：记得设置宽度。

    因为当div被position固定定位（这里指absolute和fixed，relative不会这样）或者float了以后，如果不设定宽度，就会表现为根据内容大小自动调节，不会布满屏幕。

    但是当position:absolute/fixed时，若宽度/高度值缺省，此时如果同时设置left和right/top和bottom的值，则容器会被撑开到指定位置，不紧贴内容。

    而当float:left/right时，若宽度值缺省，但同时他的子元素设置了float:right/left，则容器被撑开到子元素的指定位置。相同的还有display:inline-block。

　　

　　方法二：用boxsizing改变盒子模型

    这个方法是我查资料时找到的，http://www.cnblogs.com/pigtail/，博主写的很详细，感兴趣可以去看看。学习嘛，我就用自己的理解总结一下。

 

　　　　　　

   

转载于:https://www.cnblogs.com/xujijisareadomain/p/5530508.html