0

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

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

我曾尝试使用 height 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; */
    }
4

2 回答 2

0

你可以尝试这样的事情：

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

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

我做了一个演示，你可以试试。

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

于 2013-02-04T00:57:49.067 回答
0

如果没有 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 来解决此问题。一个个去掉属性，找出可能的问题。

于 2013-02-04T01:01:23.827 回答