如何将元素（DIV/TABLE/other）高度设置为其容器的100％？

我正试图完成一个简单的'液体布局'，左边是两个宽度= 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>

来源

2009-12-12 thomaspaulb

由于可怕的使用表的可能，所有提出的解决方案上场后，我发现只有一个解决方案（使用表）满足我的所有约束。有一天，我希望能够将Andy的代码翻译成带有DIV的工作解决方案，现在我担心我会陷入困境。 编辑：对于任何人想尝试，所有源代码可用here。

总括来说，我的制约因素，

完全液态布局：任何细胞如下的任何其它单元格的高度
间距10px的内部（而不是外部）
3D的小区之间周围的边框细胞
的，我有我的电脑上所有的浏览器工作器（Chrome，IE，火狐）

总结我的解决方案，我用的空隔细胞来实现单元格间距，因为知道我的所有其他间距的方法并不能满足所有的约束条件：

CSS边框间距增加了一个边界周围全表过，我不想
选择单元格边框限制我的能力的3D边框添加到我的细胞

灌装间隔细胞的NBSP使他们太高了，所以我选择了离开他们空将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>

来源

2009-12-13 23:22:27 thomaspaulb

尝试：

.outsidecell { 
    height:100%; 
    <other stuff here> 
}

这工作，因为有一个“内部”内容框是在内容的绘制发生。这个内盒只有它的内容一样大。所以即使该内容表示100％，它也只会是100％，而不是父容器。因此，您需要将父容器扩展为其实际的100％大小。

这可能不是它背后的实际机制，但在这么多的话......

来源

2009-12-12 00:21:07

嘿，你是对的IE和Firefox，但它不适用于Chrome。我也不太明白为什么会这样;我认为绿色已经证明容器是100％的高度。显然不是。如果你可以弄清楚如何使它在Chrome中也可以工作，那你就是这样！:) – thomaspaulb 2009-12-12 01:17:16

我对此做了一个新的回答。也适用于Chrome。 :) – 2009-12-12 12:30:55

如果你设置你的列和的DIV = 100％的高度的高度，它将为you..that工作如果你的设计允许你设置TD上的高度:)。

来源

2009-12-12 00:22:02 PortageMonkey

不，问题是它们都是可变的..它们取决于内容 – thomaspaulb 2009-12-12 01:28:22

首先，不要使用表格进行布局。这是一个语义上的否定。有了这个，请参阅The Perfect 3 Column Liquid Layout by Matthew James Taylor。 Matthew创建了多列液体布局的一个很好的实现，可以按百分比或em宽度进行设置。

来源

2009-12-12 00:26:42 andrewle

他的问题涉及**可变尺寸和比例**的两个垂直相邻部分，旁边是与两个尺寸相同的部分其他组合。 div布局不能解决问题。将他的代码粘贴到一个html文件中并将其打开。 – 2009-12-12 00:38:59

我必须补充一点，如果他不挑剔两个垂直部分是相同高度而不考虑内容，它可能是可以解决的。 – 2009-12-12 00:40:47

感谢您的链接，但不是只有三列布局有用的代码？如果您能提供一些关于如何使用DIV和CSS的工作代码，我将不胜感激。我尝试过，并且几乎成功了，我遇到的主要问题是单元之间的间距为10px; DIV盒子开始重叠，并且我没有找到在液体条件下保持间隔不变的方法。 – thomaspaulb 2009-12-12 01:22:28

使用表格单元格的大纲而不是边框，它将起作用。把它里面的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>

来源

2009-12-12 12:28:10

老兄，谢谢... +1对于努力:-) 但是我也不能使用这个..我不能使用border-spacing属性，因为它具有在表格周围创建一个我无法禁用的白色边框的副作用我不想要（我想在当前网页中使用此布局，我需要它是100％宽度） – thomaspaulb 2009-12-13 22:36:57

查看我发布的另一个解决方案，该解决方案在大多数情况下都可以工作。基于DIV。 – 2009-12-13 23:27:35

http://stackoverflow.com/questions/1891670/how-to-set-element-div-table-other-height-to-100-of-its-container/1898179#1898179 – 2009-12-13 23:28:12

下面是基于一个一个div，它只要工作的右侧的单元格不会比其他两个更多。只有在您使用xhtml文档类型时，才能在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>

来源

2009-12-13 23:22:59

它不符合我的要求单元之间的间距为10px，如你所说，它也不是完全液体的。我认为这段代码与和平主义的“堆积列布局”中的一些CSS结合在一起最终将导致DIV的工作解决方案，但我现在没有时间去解决它。来源可在这里找到：http://www.antiflu.dds.nl/layout.zip – thomaspaulb 2009-12-16 15:05:28

更正：严格的文档类型。 XHTML文档类型不是严格按照定义。有足够的XHTML文档类型触发怪异模式。 – BalusC 2009-12-16 15:19:40

如何将元素（DIV/TABLE/other）高度设置为其容器的100％？

回答

相关问题