Firefox中的CSS容器高度不同？答案

【问题标题】：css container height different in firefox?Firefox中的CSS容器高度不同？
【发布时间】：2013-02-04 09:33:01
【问题描述】：

我的 CSS 有问题。基本上我有一个名为容器的<div>，它包含我网站的所有内容。容器平行于其他东西的右侧边缘。

我需要两者在底部正确对齐。 Chrome 和 Safari 显示容器高度相同，右侧边距和容器都对齐，但在 Firefox 中，容器比右侧边距短。无论如何我可以为firefox或其他方式设置单独的css条件，因为它看起来很傻。

我尝试使用高度 100%，但我不能使用它，因为我有 javascript 和其他隐藏并淡入的东西以及其他原因。

#container {
        /* [disabled]overflow: hidden;
    */
        padding-top: 10px;
        padding-right: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
        /* [disabled]float: left; */
        width: 960px;
        margin-left: auto;
        margin-right: auto;

    }

    body {
        /* [disabled]margin-right: auto; */
        /* [disabled]margin-left: auto; */
        /* [disabled]width: 1010px; */
        font-size: 11px;
        font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
        color:#3F3F3F;
        background-color: #F3F3F3;
        margin-top: 20px;
        overflow:auto;
        /* [disabled]float: left; */
    }

【问题讨论】：

我添加了 body div，因为我的意思是说我已经尝试了一个设置自动溢出的想法，但这也不起作用

标签： css firefox

【解决方案1】：

你可以试试这样的：

HTML

<div>HEADER</div>

<div class="container">
    <div class="content">
        <p>Content Area</p>
        <p>row#2</p>
        <p>row#3</p>
        <p>row#4</p>
        <p>row#5</p>
        <p>row#6</p>
    </div>

    <div class="sidebar">
        Sidebar
    </div>
</div>

<div>FOOTER</div>

CSS

.container {
    width: 960px;
    padding: 10px 20px 20px;
    margin: 0 auto;    
    overflow: hidden;
}

.content, .sidebar {
    float: left;
    padding: 1%;
    padding-bottom: 100%;
    margin-bottom: -100%;
}

.content {
    width: 68%;
    background-color: red;
}

.sidebar {
    width: 28%;
    background-color: green;
}

这应该将两列对齐到相同的高度。

我做了一个demo你可以试试。

编辑：也许您可以看看CSS-Tricks 上的文章，其中讨论了不同的有效替代方法。

【讨论】：

【解决方案2】：

如果没有 HTML，很难准确地说出来。将两者都放在具有确定像素高度的包装 div 中，然后将 #content 和 #margin div 放在 100% 高度怎么样？

#wrapper{
width: 100%;
height: your height in px;
}

#container {
    /* [disabled]overflow: hidden;
*/
    height: 100%;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    /* [disabled]float: left; */
    width: 960px;
    margin-left: auto;
    margin-right: auto;

}

#margin{
height:100%;
}

此外，在 firebug 中使用所有 CSS 来解决此问题。一个个去掉属性，找出可能的问题。

【讨论】：