CSS - 將float子DIV高度展開爲父級的高度

個人頁面結構以下：

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

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

如今， child-left DIV將有更多內容，所以parent DIV的高度根據孩子DIV增長。

但問題是child-right身高不會增長。 我怎樣才能使它的高度等於它的父母？

---

#1樓

請將parent div設置爲overflow: hidden
而後在子div中你能夠爲padding-bottom設置很大的數量。 例如
padding-bottom: 5000px
margin-bottom: -5000px
而後全部子div都將是父級的高度。
固然，若是你試圖將內容放在父div中（在其餘div以外），這將沒法工做

.parent{ border: 1px solid black; overflow: hidden; height: auto; } .child{ float: left; padding-bottom: 1500px; margin-bottom: -1500px; } .child1{ background: red; padding-right: 10px; } .child2{ background: green; padding-left: 10px; }

<div class="parent"> <div class="child1 child"> One line text in child1 </div> <div class="child2 child"> Three line text in child2<br /> Three line text in child2<br /> Three line text in child2 </div> </div>

示例： http ： //jsfiddle.net/Tareqdhk/DAFEC/

---

#2樓

我找到了不少答案，但對我來講多是最好的解決方案

.parent { 
  overflow: hidden; 
}
.parent .floatLeft {
  # your other styles
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

你能夠在這裏查看其餘解決方案http://css-tricks.com/fluid-width-equal-height-columns/

---

#3樓

對於父母：

display: flex;

爲孩子：

align-items: stretch;

你應該添加一些前綴，檢查caniuse。

---

#4樓

我用這個評論部分：

.parent { display: flex; float: left; border-top:2px solid black; width:635px; margin:10px 0px 0px 0px; padding:0px 20px 0px 20px; background-color: rgba(255,255,255,0.5); } .child-left { align-items: stretch; float: left; width:135px; padding:10px 10px 10px 0px; height:inherit; border-right:2px solid black; } .child-right { align-items: stretch; float: left; width:468px; padding:10px; }

<div class="parent"> <div class="child-left">Short</div> <div class="child-right">Tall<br>Tall</div> </div>

你能夠將孩子向右浮動，但在這種狀況下，我精確地計算了每一個div的寬度。

---

#5樓

若是您瞭解bootstrap，可使用'flex'屬性輕鬆完成。您須要作的是將下面的css屬性傳遞給parent div

.homepageSection {
  overflow: hidden;
  height: auto;
  display: flex;
  flex-flow: row;
}

其中.homepageSection是個人父div。 如今將html中的子div添加爲

<div class="abc col-md-6">
<div class="abc col-md-6">

其中abc是個人孩子div。你能夠檢查兩個子div中的高度相等而無論邊界只是給了孩子div的邊界