首页 > 代码库 > 布局实践 overflow 自适应高度

布局实践 overflow 自适应高度

2024-07-17 19:25:48   211人阅读

想布一个这样的局

　　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 中间栏利用绝对定位

　　


联系
我们