我正在尝试完成一个简单的“液体布局”，左边有两个宽度= 50％的框，右边有一个宽度= 50％的框，最右边的框的高度跟在最左边的框中，反之亦然。我想要10px的盒子之间的间距，盒子的漂亮3D感觉和外面没有边框或边缘。
我试图仅使用DIV标签实现此功能，但未成功。由于时间不够，我转而采用更熟悉的TABLE / TR / TD方法。实际上，表格单元格高度遵循总表格高度，但是当我在表格单元格中引入DIV标签以便我可以实现3D框边框时，高度再次缩小。无论在我的代码中的哪个位置，我都尝试将“height = 100％”，我的浏览器似乎没有采取行动。
问题与之前已经在StackOverflow上提出的问题有关（链接here）。建议的解决方案是使用TABLE而不是DIV。在我的情况下，如果我想坚持我的3D盒子和我的细胞之间的间距，这将无法工作。
我在下面列出了包含两种不同方法的代码，两种方法都不起作用。有人可以建议我修改我的代码，以便右边框的高度将变为其TD容器大小的100％（在示例中显示为绿色？）。任何其他具有相同结果的方法也是非常受欢迎的。 更新： Tor Valamo发布了一个答案，指出了100％的位置。不幸的是，结果仅适用于IE和Firefox，而不适用于Chrome。因此，搜索继续进行与浏览器无关的解决方案。
更新： 在收到几条有用的建议后，我发布了自己的解决方案，这是我目前唯一可以接受的解决方案。不幸的是它使用TABLE而不是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>
答案 0 :(得分：2)
首先，不要使用表格进行布局。这是一个语义禁忌。有了这个，请参阅The Perfect 3 Column Liquid Layout by Matthew James Taylor。 Matthew创建了一个很棒的多柱液体布局实现，可以按百分比或宽度调整大小。
答案 1 :(得分：2)
使用表格单元格的轮廓而不是边框，它将起作用。并将包含div放入其中！
<html>
<head>
<style>
table {
border-spacing:10px;
border:0px;
}
td {
width:50%;
outline-style:outset;
outline-color:yellow;
background-color:#CCF;
vertical-align:top;
}
* html td { /* IE hack because it doesn't recognise outline */
border-style:outset;
border-color:yellow;
}
</style>
</head>
<body>
<table>
<tr>
<td>
Lorem ipsum dolor sit amet
</td>
<td rowspan="2">
Lorem ipsum dolor sit amet
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet
</td>
</tr>
</table>
</body>
</html>
答案 2 :(得分：1)
尝试：
.outsidecell {
height:100%;
<other stuff here>
}
这是有效的，因为有一个“内部”内容框，它是内容绘图的地方。这个内盒只有它的内容大。因此，即使该内容为100％，它本身也只有100％，而不是父容器。因此，您需要将父容器扩展为其实际的100％大小。
这可能不是它背后的实际机制，但用很多的话来说......
答案 3 :(得分：1)
尽管使用表格可能很糟糕，但在使用所有提议的解决方案后，我发现只有一个解决方案（使用表格）满足我的所有约束。有一天，我希望能够将Andy的代码翻译成DIV的工作解决方案，现在我担心我会坚持这个。 编辑： 对于想要尝试的人，所有源代码均可用here。
总结一下，我的约束是，
总结我的解决方案，我使用空间隔单元来实现单元格间距，因为我所知道的所有其他间距方法都不能满足所有约束条件：
填充间隔单元格使它们太高，所以我选择将它们留空并将CSS empty-cells属性设置为“show”。另一种选择是用1x1间隔GIF填充它们，但那是所以 1990 ......
代码：
<html>
<head>
<style>
.outsidetable {
border-collapse: separate;
border-style: hidden;
empty-cells: show;
}
.spacercell {
width: 10px;
height: 10px;
border-style: none;
}
.contentcell {
border-style: outset;
border-color: yellow;
border-width: 2px;
background-color: #CCF;
}
</style>
</head>
<body>
<p>
<table class=outsidetable>
<tr>
<td class=contentcell>
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
</td>
<td class=spacercell></td>
<td class=contentcell rowspan=3>
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
</td>
</tr>
<tr>
<td class=spacercell colspan=3></td>
</tr>
<tr>
<td class=contentcell>
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
</td>
<td class=spacercell></td>
</tr>
</table>
</p>
</body>
</html>
答案 4 :(得分：1)
这是一个基于div的，只要右边的单元格没有填充超过其他两个组合就可以工作。只有在使用xhtml doctype时才能在IE中使用。
.inner {
border:5px outset yellow;
background-color:#CCF;
}
.outer {
position:relative;
border:1px solid #000;
width:500px;
}
.left {
position:relative;
width:240px;
}
.right {
position:absolute;
top:0;
right:0;
bottom:0;
width:240px;
}
<div class="outer">
<div class="inner left">
Lorem<br />
Lorem<br />
</div>
<div class="inner left">
Schmorem<br />
Schmorem<br />
Schmorem<br />
</div>
<div class="inner right">
Ipsum schmipsum!<br />
Ipsum schmipsum!<br />
</div>
</div>
答案 5 :(得分：0)
如果您在列上设置高度并且div的高度为100％，那么它将适用于您。即如果您的设计允许您在TD上设置高度:)。