布局实践 overflow 自适应高度

想布一个这样的局

　　1.中间那栏在<500px的时候没有滚动条，一旦内容超出出现滚动条;

      2.若右边div高度被内容撑大，左边跟着变高。撑大到足够高的时候滚动条没掉;

　　3.中间那栏有个border-right,不能因为左边太短或者右边太长之类的出现断层

 

思路一

　　按一般的布局方式，写了一个这样的

　　css

        * {
            padding: 0;
            margin: 0;
        }
        .div1 {
            height: 500px;
            width: 200px;
            background: red;
            float: left;
        }
        .div2 {
            width: 300px;
            background: yellow;
            float: left;
            /*margin-left: 200px;*/
        }
        .div3 {
            margin-left: 500px;
            background: blue;
        }

        .div22 {
            min-height: 500px;     
        }
        .div33 {
            height: 300px;
        }

body

<div>
        <div class="div1"></div>
        <div class="div2">
            <div class="div22"></div>
        </div>
        <div class="div3">
            <div class="div33"></div>
        </div>
    </div>

但是无论怎么调中间和右边的内容高度，中间都不会出现滚动条。

原因是：中间那栏float了，没法跟着父元素的大小自适应

 

解决：给父元素clearfix

另外，利用负外边距的特性。代码为下

* {
            padding: 0;
            margin: 0;
        }
        .div1 {
            height: 500px;
            width: 200px;
            background: red;
            float: left;
        }
        .div2 {
            width: 300px;
            /*background: yellow;*/
            float: left;
            /*这两行能保证中间高度最低为500（意味着border最低也有500px高度），但border会随着包裹的内容增高而增高*/
            min-height: 5000px;
            margin-bottom: -4500px;  
            /*要是没有这个，页面就会有5000px的高度*/
            overflow: auto;
            border-right: 2px solid black; 
        }
        .div3 {
            margin-left: 502px;
            background: blue;
        }

        .div22 {
            height: 500px;
            background: green;
        }
        .div33 {
            height: 900px;
        }
        .clearfix:after {
            content : ".";
            height : 1px;
            display : block;
            visibility : hidden;
            clear : both;
        }
    

<div class="clearfix">
        <div class="div1"></div>
        <div class="div2">
            <div class="div22"></div>
        </div>
        <div class="div3">
            <div class="div33"></div>
        </div>
    </div>

更改div2的margin-bottom可以保证border的最短高度（当然，如果短于屏幕高度的话它会延伸至整个屏幕高度，这点不太好）;

更改div22的height可以试验页面是否会撑大，border是否跟着变大（完了居然不能）;

更改div33的height可以试验页面是否会撑大，border是否跟着变大(这个可以);

 

感觉这种效果不是很好。而且左边没有滚动条

 

思路2 中间栏利用绝对定位