Question

我的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; */
    }

Answer 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上的文章。

Answer 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来解决此问题。逐个删除属性以找到可能的问题。

在Firefox中css容器高度不同？

2 个答案: