我試圖讓容器內的所有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>
請避免使用內嵌樣式。 [爲什麼使用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