当前位置: 首页 > Web前端 > CSS

纯CSS实现侧边栏-分栏高度自动相等

时间:2023-03-30 16:10:23 CSS

纯CSS实现侧边栏/栏自动等高栏高一致的目的是为了更美观。举两个例子。①对于栏目布局,我们可能会用边框来分隔,就像我博客的栏目:边框栏目张鑫旭-鑫空间-鑫生活这时候最担心的问题就是高度不一致,尤其是无边框属性如果column的height超过border属性的column,结果会是:borderheight不足时表现不佳存在局限性。②对于栏目布局,我们可以用纯色填充背景,我的两栏演示页面。纯色背景分栏张欣旭-欣空间-欣生活但是如果两栏的高度不一致,比如左边的超出范围,可能是:纯色的高度背景颜色不一致张鑫旭-鑫空间-鑫生活很明显,就美不起来了。可见,需要实现列高的一致性。2.纯CSS实现侧边栏/栏高自动均衡这里直接介绍一下我认为最好的侧边栏/栏高自动均衡的方法。核心CSS代码如下(取值不固定):margin-bottom:-3000px;填充底部:3000px;结合父标签的overflow:hidden属性,可以达到自动均衡高度的效果。举个简单的例子,下面的CSS和HTML代码:content{overflow:hidden;}.left{width:200px;底部边距:-3000px;填充底部:3000px;背景:#cad5eb;浮动:左;}.右{宽度:400px;底部边距:-3000px;填充底部:3000px;背景:#f0f3f9;float:right;}.center{margin:0410px0210px;背景:#ffe6b8;height:600px;}左,无高度属性,自适应最高列的高度

右,无height属性,自适应在最高列的高度中间
,高度为600像素,左右列的高度自适应
结果如下:列高自动相等张鑫旭-鑫空间-鑫生活可以猛戳这里:列自动轮廓演示说明:核心CSS代码部分3000像素为变量值,如果你的列高不能超过2000像素,可以设置为2000像素,如果会超过3000像素,那么你需要修改数值为4000像素或者更高。父标签的overflow:hidden属性是必须的,否则会显示溢出的内容。也可以猛戳这里:列高均等后,《纯CSS实现各种气球气泡对话框效果》一文高度溢出的demo页3.其他列高处理实现负边距值的方法它可以说,列高的一致显示是最好的方法。当然,还有其他轻量级的替代品。比如使用min-height属性,IE6不支持min-height但是高度会自动拉高,所以min-height+_height的组合也是常用的方法之一;另一种是使用背景图,利用背景图的垂直平铺,可以模拟柱子的等高背景效果。但是这种方式对版面宽度有一定的要求。如果布局宽度发生变化,背景图像可能也需要修改。这些方法我想大部分同行都知道,就不赘述了。如果您发现文章中有不准确的表述或有相关疑问,欢迎交流。原创文章,转载请注明出自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]本文地址:http://www.zhangxinxu.com/wor...