46

我有一个包含两个内部 div 的容器 div；两者都应在容器内占用 100% 的宽度和 100% 的高度。

我将两个内部 div 设置为 100% 高度。这在 Firefox 中运行良好，但在 IE 中，div 不会拉伸到 100% 高度，而只会拉伸到其中文本的高度。

以下是我的样式表的简化版本。

#container
{
   height: auto;
   width: 100%;
}

#container #mainContentsWrapper
{
   float: left;

   height: 100%;
   width: 70%;
   margin: 0;
   padding: 0;
}


#container #sidebarWrapper
{      
   float: right;

   height: 100%;
   width: 29.7%;
   margin: 0;
   padding: 0;
}

有什么我做错了吗？或者我错过的任何 Firefox/IE 怪癖？

4

8 回答 8

74

我认为“在 Firefox 中运行良好”仅在Quirks 模式下呈现。在标准模式渲染中，这在 Firefox 中也可能无法正常工作。

百分比取决于“包含块”，而不是视口。

CSS 规范说

该百分比是相对于生成框的包含块的高度计算的。如果包含块的高度没有明确指定（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为'auto'。

所以

#container { height: auto; }
#container #mainContentsWrapper { height: n%; }
#container #sidebarWrapper { height: n%; }

方法

#container { height: auto; }
#container #mainContentsWrapper { height: auto; }
#container #sidebarWrapper { height: auto; }

要拉伸到视口的 100% 高度，您需要指定包含块的高度（在本例中为 #container）。此外，您还需要指定 body 和 html 的高度，因为初始 Containing Block 是“UA-dependent”。

所有你需要的是...

html, body { height:100%; }
#container { height:100%; }
于 2008-10-06T22:26:53.287 回答
2

如果没有看到您实际使用的 html，很难给您一个好的答案。

您是否正在输出 doctype / 使用标准模式渲染？在实际上无法查看 html repro 的情况下，这将是我对 firefox 和 Internet Explorer 之间的 html 解释差异的第一个猜测。

于 2008-10-06T01:36:30.363 回答
2

我不确定您要解决什么问题，但是当我有两个需要相同高度的并排容器时，我在页面加载时运行了一些 javascript 来找到两者的最大高度并明确将另一个设置为相同的高度。在我看来， height: 100% 可能只是意味着“使其成为完全包含内容所需的大小”，而您真正想要的是“同时制作最大内容的大小”。

注意：如果页面上发生任何事情来改变它们的高度，你需要再次调整它们的大小——比如使验证摘要可见或打开可折叠的菜单。

于 2008-10-06T01:46:21.467 回答
2

当我将容器的边距设置为 0 时，我已经成功地让它工作：

#container
{
   margin: 0 px;
}

除了你所有的其他风格

于 2008-10-06T14:51:22.677 回答
1

您可能必须放置以下一项或两项：

html { height:100%; }

或者

body { height:100%; }

编辑：哎呀，没有注意到它们被漂浮了。你只需要漂浮容器。

于 2008-10-06T00:43:30.063 回答
1

我做了一些与“tvanfosson”所说的非常相似的事情，也就是说，实际上使用 JavaScript 通过诸如 onresize 之类的事件不断监视窗口中的可用高度，并使用该信息相应地更改容器大小（以像素而不是百分比）。

请记住，这确实意味着 JavaScript 依赖，它不像 CSS 解决方案那样流畅。您还需要确保 JavaScript 函数能够在所有主要浏览器中正确返回窗口尺寸。

让我们知道前面提到的 CSS 解决方案之一是否有效，因为这听起来是解决问题的更好方法。

于 2008-10-06T13:25:04.940 回答
0

我不认为 IE 支持使用 auto 来设置高度/宽度，所以你可以尝试给它一个数值（就像 Jarett 建议的那样）。

此外，您似乎没有正确清除浮动。尝试将此添加到您的#container 的 CSS 中：

#container {
    height:100%;
    width:100%;
    overflow:hidden;
    /* for IE */
    zoom:1;
}
于 2008-10-06T13:10:34.267 回答
0

试试这个..

#container
{
   height: auto;
   min-height:100%;
   width: 100%;
}

#container #mainContentsWrapper
{
   float: left;

   height: auto;
   min-height:100%
   width: 70%;
   margin: 0;
   padding: 0;
}


#container #sidebarWrapper
{      
   float: right;

   height: auto;
   min-height:100%
   width: 29.7%;
   margin: 0;
   padding: 0;
}
于 2009-12-15T11:08:10.957 回答