CSS设置div高度自适应

最新推荐文章于 2024-10-10 17:36:40 发布

Macky_Zhang

最新推荐文章于 2024-10-10 17:36:40 发布

阅读量2.1w

点赞数 6

文章标签： CSS 自适应

本文链接：https://blog.csdn.net/Macky_Zhang/article/details/85060147

版权

通过CSS实现Div高度自适应：

问：

在一个DIV中有多个未知高度的子元素DIV，怎样通过CSS实现子元素div同高或怎样实现同行div按照内容最多的那个设置高度。

如图：

实现1：添加表格特性

方式：

父级元素添加属性 display: table;

子一级元素添加属性 display: table-cell;

.div-row {

width: 400px;

border: 1px solid #23527C;

display: table;

}

.div-col {

display: table-cell;

}

</style>

</div>

</div>

</div>

</div>

效果如下：

注意：

浏览器兼容问题：IE6/IE7可能存在不兼容的情况

display: table时子元素会自动左浮动，不需要再进行浮动操作

display: table时padding会失效

display: table-cell时margin会失效,会先均分父级框，然后根据占比

实现2：补丁法

方式：父级元素溢出隐藏：overflow:hidden;

子一级元素“正内补丁”“负外补丁”结合： padding-bottom:9999px;margin-bottom:-9999px;

.div-row {

width: 400px;

border: 1px solid #23527C;

overflow: hidden;

}

.div-col {

width: 25%;

float: left;

padding-bottom: 9999px;

margin-bottom: -9999px;

}

</style>

</div>

</div>

</div>

</div>

效果如下：

注意：

只是视觉上的“障眼法”
其他属性需要（浮动，宽度）需要自己再设置

实现3：填充背景

方式：通过在父级元素使用一张背景图片实现

.div-row {

width: 400px;

background-image: url(../img/similarHeight.jpg);

background-repeat: repeat-y;

border: 1px solid #23527C;

}

.div-col {

width:25%;

float: left;

}

.clear {

clear: both;

}

</style>

</div>

</div>

</div>

</div>

</div>

效果如下：

注意：

只是多加载了一张背景图，据说是目前比较流行的方式

背景图片需要视情况设计

标签最后用于清除浮动的元素等同于父元素加overflow: hidden; 让父元素高度自适应

实现4：flex布局

实现：

父级元素设置：display: flex;

.div-row {

width: 400px;

border: 1px solid #23527C;

display: flex;

}

.div-col {

width: 25%;

}

</style>

</div>

</div>

</div>

</div>

效果如下：

注意：

版本兼容，IE10+

补充：指定子元素

实现：根据相对和绝对定位实现

父级元素设置：position: relative;

子一级元素设置：position: absolute;

.div-row {

width: 400px;

position:relative ;

border: 1px solid #23527C;

overflow: hidden;

}

.div-col1 {

width: 25%;

float: left;

}

.div-col2 {

width: 25%;

left: 25%;

top: 0;

float: left;

position: absolute;

}

.div-col3 {

width: 25%;

left: 50%;

top: 0;

float: left;

position: absolute;

}

.div-col4 {

width: 25%;

left: 75%;

top: 0;

float: left;

position: absolute;

}

</style>

</div>

</div>

</div>

</div>

效果如下：

注意：

需要指定某个子元素，用于指定的子元素不做定位操作，根据他的高度而实现同一高度。

方法实用性差，也不是实现根据内容最高的子元素自适应高度。

补充：js实现

</div>

</div>

</div>

</div>

$(function(){

var baseHeight = 0;

$(".div-col").each(function(){

if(baseHeight < $(this).height()){

baseHeight = $(this).height()

}

})

$(".div-row").css({"width":"400px","border":"1px solid #111","overflow":"hidden"});

$(".div-col").css({"width":"25%","height":baseHeight,"float":"left"});

})

</script>

效果如下：