代码之家 › 专栏 › 技术社区 › littlegreen

如何将元素(div/table/other)高度设置为其容器的100%?

css html

littlegreen · 技术社区 · 15 年前

我正在尝试完成一个简单的“液体布局”,左侧两个宽度=50%的框,右侧一个宽度=50%的框,其中最右边的框的高度跟随最左边的框,反之亦然。我想要一个间距为10px的盒子,一个美好的三维感觉的盒子,没有边界或边缘的外部。

我尝试只使用DIV标记来实现它,但没有成功。由于缺乏时间,我改用了更熟悉的table/tr/td方法。实际上,表单元格的高度跟在表的总高度之后,但是当我在表单元格中引入DIV标记以便实现我的三维框边界时,高度再次收缩。无论我在代码中的哪个位置尝试放置“height=100%”,我的浏览器似乎都不会对它起作用。

此问题与之前在StackOverflow上已询问的问题有关(链接 here )。建议的解决方案是使用表格而不是DIV。在我的例子中,如果我想同时使用我的3D框和单元格之间的间距,这将不起作用。

我在下面的代码中包含了两种不同的方法,它们都不起作用。有人能给我建议一种方法来修复我的代码,使右边的框的高度成为其td容器大小的100%(示例中显示为绿色?).也欢迎有相同结果的任何其他方法。 更新: TorValamo发布了一个答案,指出了100%应该放在哪里。不幸的是,结果只适用于IE和火狐,而不是Chrome。因此,搜索继续寻找与浏览器无关的解决方案。

更新: 在收到一些有用的建议后,我发布了我自己的解决方案,这是目前我唯一可以接受的解决方案。不幸的是,它使用的是表而不是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>  <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>  <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>

6 回复 | 直到 15 年前

andrewle 15 年前

首先,不要使用表格进行布局。这是一个语义上的“不”,如果不这样的话,请看 The Perfect 3 Column Liquid Layout by Matthew James Taylor . Matthew创建了一个多列液体布局的伟大实现,可以按百分比或em宽度调整大小。

Tor Valamo 15 年前

使用表格单元格的轮廓而不是边框,它将起作用。把包含的分区也放在里面!

<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>

Tor Valamo 15 年前

尝试:

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

这是可行的,因为有一个“内部”内容框,它是内容绘图的地方。这个内盒只有它的内容那么大。因此,即使该内容表示100%,它也只对自身100%,而不是父容器。所以您需要将父容器扩展到它自己的实际100%大小。

这可能不是它背后的实际机制,但在很多词中…

Tor Valamo 15 年前

这里有一个基于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>

littlegreen 15 年前

尽管使用表可能很可怕,但是在使用所有建议的解决方案之后,我发现只有一个解决方案(使用表)能够满足我所有的约束条件。有一天,我希望能够用DIV把安迪的代码翻译成一个有效的解决方案,现在恐怕我已经陷入困境了。 编辑: 对于任何想尝试的人,所有源代码都可用 here .

概括地说,我的制约因素是,

完全液体布局:任何单元格都跟随其他单元格的高度
内部(而非外部)10px的电池间距
单元格周围的三维边框
适用于我电脑上的所有浏览器(Chrome、IE、Firefox)

总结我的解决方案,我使用空的间隔单元格来实现单元格间距,因为我知道的所有其他间隔方法都不满足所有约束:

CSS边框间距在整个表周围添加了一个边框,我不希望这样做
选择性单元格边框限制了我向单元格添加三维边框的能力

用nbsp填充间隔单元格会使它们太高,所以我选择将其保留为空,并将CSS空单元格属性设置为“显示”。另一种选择是用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>

PortageMonkey 15 年前

如果您在列上设置了高度,并且DIV的高度为100%,那么它将对您有效……也就是说,如果您的设计允许您在td上设置高度:)。