如何實現同等高度的跨瀏覽器div

我試圖讓容器內的所有div都具有與最大值相同的高度。基本上，所有的div都是在容器內100％的高度，並且沒有固定任何div的高度。如何實現同等高度的跨瀏覽器div

下面是我設法提出的，但我似乎無法讓它適用於所有瀏覽器。有沒有辦法實現這個結果，但沒有使用jQuery，JavaScript。

下面的結果是通過設置一個容器的高度，但我想實現這個沒有固定的高度，因爲內容會改變。

<!DOCTYPE html> 
<html> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Untitled 2</title> 
</head> 

<body> 

<div style="width: 500px; background-color: fuchsia; height: 400px; display: table"> 
    <div style="display: table-row; height: 100%"> 
     <div style="width: 50%; background-color: blue; float: left; height: 100%; display: table-cell">col 1</div> 
     <div style="width: 50%; background-color: green; float: left; height: 100%; display: table-cell">col 2<br /> 
      <br /> 
      <br /> 
      <br /> 

     </div> 
    </div> 
    <div style="display: table-row; height: 100%"> 
     <div style="width: 30%; background-color: blue; float: left; height: 100%; display: table-cell">col 1</div> 
     <div style="width: 30%; background-color: green; float: left; height: 100%; display: table-cell">col 2<br /> 
      <br /> 
      <br /> 
      <br /> 
      <br /> 
     </div> 
    </div> 
</div> 





</body> 
</html>

來源

2014-09-26 user3068032

請避免使用內嵌樣式。 [爲什麼使用CSS]（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Why_use_CSS） – 2014-09-26 12:22:19

這只是爲了舉例。 – user3068032 2014-09-26 12:28:57

爲了讓所有div至出現因爲如果他們有相同的高度，你可以使用僞元素放的div的每一個背後的各自的背景。這些僞元素將取得wrapper-div的高度，而wrapper-div又取決於最高div的高度。

在TUTS +查看該技術的完整說明：Solving the Equal Height Column Conundrum

來源

2014-09-26 16:35:47

沒有其他方法可以在不使用僞元素方法的情況下實現這一點。 – user3068032 2014-10-07 15:35:43

如何實現同等高度的跨瀏覽器div

回答

相關問題