css 如何实现子元素继承父元素的高度-高度继承

overme2个月前 (10-17)网页设计158

当父元素body中有两个class分别为left和right的子元素,设置class为left的元素高度为300px,right元素不设置高度。
想让right元素的的高度自动填充为父元素的高度，该怎么实现呢?

现状图：

现状CSS代码：

.body{
width: 600px;
margin:0 auto;
overflow: hidden;
}
.left{
width: 50%;
height: 300px;
background-color: gray;
float: left;
}
.right{
width: 50%;
float: right;
background-color: blue;
}

复制代码

实现图：

实现代码：

.body{
width: 600px;
margin:0 auto;
<font color=”#ff0000″>position: relative;</font>
overflow: hidden;
}
.left{
width: 50%;
height: 300px;
background-color: gray;
float: left;
}
.right{
width: 50%;
<font color=”#ff0000″>position: absolute;
right: 0px;</font>
background-color: blue;
<font color=”#ff0000″>height: 100%;</font>
}

复制代码

发表评论