如何確保兩個div具有相同的高度？

假設我在一個包裝中並排放置2個div。如何確保兩個div具有相同的高度？

<div id="wrapper"> 
    <div id="primary"></div> 
    <div id="secondary"></div> 
</div> 

#primary { 
width:50%; 
float: left; 
} 
#secondary { 
width: 50%; 
}

我怎樣才能確保DIV二次始終具有相同的高度DIV主要

來源

2013-04-29 Jack Pilowsky

我假定你的意思是沒有指定的高度？除非您可以使用[flex-box]（https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes），否則您將需要JavaScript。 – 2013-04-29 03:02:57

*請參閱我的回答下面的簡單，但很酷的CSS技巧* – gibberish 2015-03-17 02:52:05

不幸的是，這樣做沒有使用Javascript沒有完美的方法，抓實兩個div一無所知彼此。

你的選擇取決於你想要達到的目標。

一個快速谷歌搜索提出這看起來很有希望：http://www.vanseodesign.com/css/equal-height-columns/

如果你能專注於更現代的瀏覽器您可以使用Flexbox的脫身。看到這個帖子的例子等：http://css-tricks.com/fluid-width-equal-height-columns/

來源

2013-04-29 03:03:01 BePatient

好的答案應該實際上包含答案，而不是答案的鏈接。鏈接可能會在某一時刻死亡，併爲讀者提供額外的負擔。 – RushPL 2014-06-25 16:37:11

嘗試使用JavaScript獲取主div的值在第二個div的任務。

的另一種方法是試圖使用像素PX或EM，這樣可以確保始終具有相同的高度都

來源

2013-04-29 03:10:12

使高度相等的兩個div（無論是在PX宣佈他們的高度，EM或％）並聲明他們的overflow : auto，所以如果任何或兩個div中的內容增加，滾動會自動提供，並且它們的高度不會受到干擾。

來源

2013-04-29 03:59:04 qwerty

只是確保父DIV（DIV包裝）在像素寬度

<div id="wrapper"> 
    <div id="primary"></div> 
    <div id="secondary"></div> 
</div> 

#wrapper { 
    width:300px; 
} 
#primary { 
    width:50%; 
    float: left; 
} 
#secondary { 
    width: 50%; 
}

這會工作，除非DIV主要有邊距和/或填充

來源

2013-04-29 04:08:37 arnaldododo

如果指定的高度值他們的容器可以說是#wrapper {height:300px;}，您可以將#primary和#secondary高度值設置爲100%。但是，如果你不想指定任何高度值，那麼你可以在例子中使用display:table選項喜歡這裏http://jsfiddle.net/qiqiabaziz/LFEF5/

來源

2013-04-29 04:21:01

Your CSS 

.table{display:table;width:99.98%;margin:0 auto;padding:0 0.01% 0 0.01%;border-collapse:separate;border-spacing:5px;} 
.row{display:table-row;} 
.cell{display:table-cell;text-align:center;width:50%;} 

Your HTML 

<body> 
    <div class="table"> 
     <div class="row"> 
      <div class="cell">content for this div 
      </div> 
      <div class="cell">content for this div 
      </div> 
     </div> 
    </div> 
</body>

來源

2014-02-13 04:19:35 user3302090

有一個關於如何做到這一點一個很酷的技巧。

jsFiddle Demo

首先，你申請padding-bottom: 100%;每個並排側股利。

接下來，您將margin-bottom: -100%;應用於每個並排div。 注-

最後，添加overflow:hidden;到他們裏面的股利。

Presto！真正的幸福是你的。

HTML：

<div id="wrapper"> 
    <div id="primary">Lorem ipsum dolor set amet. </div> 
    <div id="secondary">En arche yn ho logos. Kai ho logos yn pros ton theon. Kai theon yn ho logos. En arche yn ho logos. Kai ho logos yn pros ton theon. Kai theon yn ho logos. </div> 
</div>

CSS：

#wrapper {overflow:hidden;} 
#primary {width:50%; float:left; padding-bottom:100%; margin-bottom:-100%;} 
#secondary{width:50%; float:left; padding-bottom:100%; margin-bottom:-100%;}

參考文獻：

http://www.ejeliot.com/blog/61

來源

2015-03-17 02:50:00 gibberish

如何確保兩個div具有相同的高度？

回答

相關問題