使用CSS將一行div設置為相同的高度

Question

我有一行div必須都是相同的高度，但我無法知道這個高度可能提前（內容來自外部源）。 我最初嘗試將div放在一個封閉的div中並將它們向左浮動。 然后我將它們的高度設置為“100％”，但這沒有明顯的效果。 通過將封閉div上的高度設置為固定高度，我可以將浮動的div擴展，但只能達到容器的固定高度。 當其中一個div中的內容超過固定高度時，溢出; 浮動的divs拒絕擴張。

我用Google搜索了這個浮動的div-of-the-height-problem問題，顯然沒有辦法用CSS做到這一點。 所以現在我試圖使用相對和絕對定位的組合而不是浮點數。 這是CSS：

<style type="text/css">
div.container {
  background: #ccc;
  position: relative;
  min-height: 10em;
}
div.a {
  background-color: #aaa;
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  width: 40%;
}
div.b {
  background-color: #bbb;
  position: absolute;
  top: 0px;
  left: 41%;
  bottom: 0px;
  width: 40%;
}
</style>

這是HTML的簡化版本：

   <div class="container">
    <div class="a">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</div>
    <div class="b">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</div>
   </div>

這是有效的，除非你將min-height更改為類似於5em（展示內容超出最小高度時會發生什么），並且你可以看到，雖然文本沒有被截斷，但div仍然拒絕擴展。 現在我輸了。 有沒有辦法用CSS做到這一點？

Answer 1

這是一個你可以陷入理想主義或現實之間的時刻。 我理解，出於格式化的原因，將非表格數據放在表格中沒有語義價值，但是我不希望看到你向后彎腰以便為這個問題創建一個非表格式的解決方案，僅僅是為了它自己。

我是第一個擊落非語義設計的人，相信我，但有時你需要面對CSS +語義標記不適用於所有設計場景的事實。 我不知道這個網站的可訪問性需求，但我建議你尋找一個更實際的解決方案來解決這個問題。

歡呼你以正確的方式接近這個並尋找解決它的正確方法！ 不幸的是，這是CSS的黑暗角落之一（以及塊內的垂直定位）​​，如果沒有虛擬列，javascript或表格單元格，這是不可能的。

無論您選擇哪種，請不要為了自己的利益而遵守標准。

Answer 2

使它們完全相同的高度可能是一個棘手的事情，但如果它們只是看起來是相同的高度，你可能想看看人造柱技術。

我嘗試了其他一些方法，但這是我發現獲得效果的最可靠方法，當然除了使用表格。

Answer 3

您可以使用JavaScript，但當然它會在沒有啟用JavaScript的情況下中斷。 然后是表格，但這破壞了CSS的重點。 也許seanb的答案可以起作用，放置一個背景圖像，產生所有列都到底的錯覺。 這被稱為人造背景技術 。

或者坐下來等待display: table-cell所有/大多數瀏覽器都支持display: table-cell 。

Answer 4

好吧，桌子上的東西比我想象的要復雜一點。 事實證明，Javascript解決方案實際上是最簡單的（對於我的情況），因為我的應用程序是一個AJAX應用程序，框架使用Prototype.js。 所需要的只是幾行JS：

$$('div.container').each(function (element) {
 var longest = 0;

 element.descendants().each(function (child) {
  if (child.getHeight() > longest)
   longest = child.getHeight();
 });

 element.descendants().each(function (child) {
  child.style.height = longest + 'px';
 });
});

再次感謝您的幫助。

Answer 5

伙計們，謝謝你的回答。 我不認為背景圖像會起作用，因為列的寬度也可以根據有多少列（用戶可以更改它）而變化。 我想我會用表:(

Answer 6

如果你正在尋找一個純粹的css選項，並且你可以從內容中分離塊的背景，那么答案就是兩個，每個塊有兩位代碼，一個用於內容，一個用於背景。 這就是它的完成方式：

<div id="wrapper">
  <div class="content" id='one>
  <div class="content" id="two>
  <div class="content" id="three>
  <div class="background" id="back-one">
  <div class="background" id="back-two">
  <div class="background" id="back-three">
</div>

使用浮動定位內容div。 然后使用絕對定位（和z-index將它們放在后面）定位背景

這是有效的，因為浮子可以設置高度，絕對定位的元素可以有100％的高度。 這有點亂，但做的工作。