how to expand child "div" height to parents height

<div class="parent">
<div class="child-left floatLeft">
</div>

<div class="child-right floatLeft">
</div>

child-left DIV will have more content, so the parent DIV's height increases as per the child DIV.

But the problem is child-right height is not increasing. How can I make its height as equal to it's parent?

---

http://jsfiddle.net/r5h4w5s2/

.parent{
    width:200px;
    height:300px;
    border:1px solid black;
}

.child-left{
    float:left;
    border: 1px solid #FF0000;
    width:80px;
    height:100%;
}

.child-right{
    float:right;
    border: 1px solid #FF0000;
    width:80px;
    height:100%;
}

Here is a fiddle with an axample. By setting the height to 100% it will take the height of its first parent element.

---

喜欢这个：

.parent{
  overflow: hidden;
}
.child-right{
  height: 100%;
}

---

That's a common problem, known as Equal Height Columns, described here (2010 article!). I would suggest the flex box solution or a Javscript approach.

链接地址: http://www.djcxy.com/p/94732.html

上一篇: 如何在TBODY元素之间放置间距

下一篇: 如何将孩子的“身高”扩大到父母身高