html行高与父div一样,CSS子元素跟父元素的高度一致的实现方法

这篇文章主要介绍了CSS子元素跟父元素的高度一致的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

绝对定位方法：

(1)将父元素设置为相对定位，不写父元素的高度时，会随着左边的子元素高度变化而变化

.parent {

/*关键代码*/

position: relative;

/*其他样式*/

width: 800px;

color: #fff;

font-family: “Microsoft Yahei”;

text-align: center;

}

(2)左边一个元素有个最小高度的情况

.left {

min-height: 700px;

width: 600px;

}

(3)右边元素要想跟父元素的高度是一致，那么可以用绝对定位这样设置，如果不想同时写top和bottom，写一个时，再写上height:100%,也可以达到一样的效果

.right {

/*关键代码*/

width: 200px;

position: absolute;

top: 0;

right: 0;

bottom: 0;

/*其他样式*/

background: #ccc;

}

(4)完整例子代码：

子元素高度与父元素一致

.parent{

position: relative;

bac