0
我正試圖完成一個簡單的'液體佈局'，左邊是兩個寬度= 50％的盒子，右邊是一個寬度= 50％的盒子，最右邊的盒子的高度跟在最左邊的盒子上，反之亦然。我希望盒子間的間距爲10px，箱子的3D感很好，外面沒有邊框或邊距。如何將元素（DIV/TABLE/other）高度設置爲其容器的100％？
我試圖只使用DIV標籤來實現，但沒有成功。由於缺乏時間，我轉而採用更爲熟悉的TABLE/TR/TD方法。事實上，表格單元高度遵循總表格高度，但是當我在表格單元格中引入DIV標籤時，我可以實現我的3D框邊框，高度再次縮小。無論我在代碼中的哪個位置嘗試放置「height = 100％」，我的瀏覽器似乎都不會採取行動。
該問題與StackOverflow之前已詢問的問題有關（鏈接here）。建議的解決方案是使用TABLE而不是DIV。在我的情況下，如果我想要堅持我的3D盒子和我的單元格之間的間距，這將不起作用。
我在下面包含了我的代碼，其中包含兩種不同的方法，兩種都不起作用。有人可以建議我修復我的代碼，以便右邊框的高度達到其TD容器的100％（示例中顯示爲綠色）。任何其他具有相同結果的方法也非常受歡迎。 更新： Tor Valamo發佈了一個答案，指出100％的放置位置。不幸的是，結果僅適用於IE和Firefox，而不適用於Chrome。因此搜索繼續尋找獨立於瀏覽器的解決方案。
UPDATE：接收一些有用的建議後，我已經發布了自己的解決方案是在這一點上，只有一個接受我。不幸的是它使用TABLE not DIV。 DIV解決方案已經完成了一些工作，對於想要完成這項工作的任何人，源代碼可用here。
<html>
<head>
<style>
.outsidetable {
border-collapse: collapse;
border-style: hidden;
}
.outsidecell {
border-width: 10px;
border-color: #FFF;
padding: 0px;
border-style: solid;
background-color: #0F0;
}
.fancybox {
border-style: outset;
border-color: yellow;
border-width: 2px;
background-color: #CCF;
}
</style>
</head>
<body>
<!-- First example, using DIV to draw the boxes
and TABLE/TR/TD for the layout -->
<p>
<table class=outsidetable>
<tr>
<td class=outsidecell><div class=fancybox>
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
</div></td>
<td class=outsidecell rowspan=2><div class=fancybox height=100% style="height: 100%">
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
</div></td>
</tr>
<tr>
<td class=outsidecell><div class=fancybox>
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
</div></td>
</tr>
</table>
</p>
<!-- Second example, using TABLE instead of DIV to draw the boxes
(and again TABLE/TR/TD for the layout) -->
<p>
<table class=outsidetable>
<tr>
<td class=outsidecell><table class=fancybox><tr><td>
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
</td></tr></table></td>
<td class=outsidecell rowspan=2><table class=fancybox height=100% style="height: 100%"><tr><td height=100% style="height: 100%">
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
</td></tr></table></td>
</tr>
<tr>
<td class=outsidecell><table class=fancybox><tr><td>
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
</td></tr></table></td>
</tr>
</table>
</p>
</body>
</html>
嘿，你是對的IE和Firefox，但它不適用於Chrome。我也不太明白爲什麼會這樣;我認爲綠色已經證明容器是100％的高度。顯然不是。 如果你可以弄清楚如何使它在Chrome中也可以工作，那你就是這樣！:) – thomaspaulb 2009-12-12 01:17:16
我對此做了一個新的回答。也適用於Chrome。 :) – 2009-12-12 12:30:55