在Firefox中的CSS容器高度不同？

我遇到了我的CSS問題。基本上我有一個叫做容器的<div>，它擁有我網站的所有內容。容器平行於其他東西的右邊緣。在Firefox中的CSS容器高度不同？

我需要兩個在底部正確對齊。 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; */ 
    }

來源

2013-02-03 Eric Johnson

我添加了body div，因爲我的意思是說，我已經嘗試了一個想法放置一個自動溢出，但這也不工作 –

你可以嘗試這樣的事情：

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的文章，討論不同的有效替代方法。

來源

2013-02-04 00:57:49 Ragnarokkr

沒有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%; 
}

另外，玩你的所有的CSS在螢火蟲排除故障。逐個刪除屬性以查找可能的問題。

來源

2013-02-04 01:01:23 BenRacicot

在Firefox中的CSS容器高度不同？

回答

相關問題