Div 100％的高度适用于Firefox，但不适用于IE

我有一个容器div，它包含两个内部div;两者应在容器内100％宽度和100％高度。Div 100％的高度适用于Firefox，但不适用于IE

我将两个内部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的怪癖？

来源

2008-10-06 Marcel

我认为，“在Firefox正常工作“仅在怪癖模式下呈现。在标准模式下渲染，这可能无法在Firefox中正常工作。

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

CSS Specification says

百分率的计算与关于所产生的框的包含块的高度。如果包含块的高度不是明确指定的（即，它取决于内容高度的），并且此元素未被绝对定位，则值计算为'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依赖”。

所有你需要的是...

html, body { height:100%; } 
#container { height:100%; }

来源

2008-10-06 22:26:53

你可能必须把一个或两个：

html { height:100%; }

或

body { height:100%; }

编辑：哎呦，没注意到他们浮动。你只需要漂浮容器。

来源

2008-10-06 00:43:30

它很难给你一个很好的答案，没有看到你实际使用的HTML。

您正在输出文档类型/使用标准模式渲染？如果没有真正能够查看html repro，这将是我对firefox和Internet Explorer之间html解释区别的第一次猜测。

来源

2008-10-06 01:36:30 bryansh

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

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

来源

2008-10-06 01:46:21 tvanfosson

++你将花费更少的时间得到正确使用JavaScript比你想用CSS来做到这一点。我知道在IT界这样做是不好的做法......但在商业世界中，“糟糕的做法”是花费10个小时在css上做一些事情，这可能会在JavaScript 5分钟内完成。 – 2011-02-18 22:20:53

@ Mr.JavaScript是的，但有一点盐：那么你需要考虑调整窗口大小，或者可折叠的项目切换或...“快速修复”往往不是很快。 – ANeves 2015-07-09 16:31:01

我不认为IE支持使用自动设置高度/宽度，所以你可以尝试给这个数值（如Jarett建议）。

此外，它看起来并不像你正在清理你的漂浮物。实际使用JavaScript来持续监控通过类似事件的onResize在窗口可用高度

#container { 
    height:100%; 
    width:100%; 
    overflow:hidden; 
    /* for IE */ 
    zoom:1; 
}

来源

2008-10-06 13:10:34

我已经做了非常相似，“tvanfosson”说了些什么，那就是：尝试添加这对您的CSS的#container ，并使用该信息相应地更改容器大小（以像素而不是百分比）。

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

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

来源

2008-10-06 13:25:04

我已经成功地得到这个当我设置容器的边距设置为0的工作：

#container 
{ 
    margin: 0 px; 
}

除了所有其他样式

来源

2008-10-06 14:51:22 casademora

试试这个..

#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-15 11:08:10 Designerfoo

Div 100％的高度适用于Firefox，但不适用于IE

回答

相关问题