Firefox，不會自動調整容器高度：100％，底部邊距丟失！

我有一個容器和4個div的裏面。我的容器被拉伸以填充整個窗口。在IE中，如果重新調整窗口大小，則所有內容都將正確重新調整大小，並且容器周圍的所有4個邊距都可見。我試圖在FF中獲得相同的行爲，但我似乎無法找到正確的CSS配方。Firefox，不會自動調整容器高度：100％，底部邊距丟失！

請注意，如果您通過HTML和CSS代碼並檢查IE中的行爲，我試圖在FF中實現相同的行爲。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>IE AutoResize</title> 


<style type="text/css" media="screen"> 

html { 
    height:100%; 
    width:100%; 
    overflow: hidden; 
    margin-bottom:40px; 
} 

body { 
    height:100%; 
    margin-top: 10px; 
    margin-left: 10px; 
    margin-right: 10px; 
} 

#container{ 
    background-color:#808080; 
    height: 100%; 
    Valignment-adjust: central; 
    padding: 10px 10px 10px 10px; 
} 

#top { 
    background-color:#00FF80; 
    height: 10%; 
} 

#left { 
    background-color:#FF8000; 
    float:left; 
    width: 20%; 
    height:80%; 
} 

#right { 
    background-color:#3944C6; 
    width: 80%; 
    height:80%; 
    float:right; 
} 

#bottom { 
    clear:both; 
    background-color:#FF0000; 
    height: 10%; 
} 
</style> 



    </head> 
    <body> 

    <div id="container"> 
      <div id="top">top</div> 
      <div id="left">left</div> 
      <div id="right">right</div> 
      <div id="bottom">bottom</div> 
    </div> 

    </body> 
</html>

來源

2010-10-11 user472769

恐怕這是IE瀏覽器得到它錯了，FF得到它的權利另一種情況。你不能有100％的高度，然後有一個額外的邊距或填充頂部或底部，你需要找到另一種方式。如果您可以發佈您的html或鏈接，我們可以進一步指導。

來源

2010-10-11 23:16:39

我粘貼了所有的HTML和CSS代碼。我目前正在本地電腦上測試，因此無法提供鏈接。我基本上需要一個容器div，其周圍有10px的邊距。容器div應該自動調整大小，但邊距必須保持不變10px。 – user472769 2010-10-11 23:50:18

Firefox，不會自動調整容器高度：100％，底部邊距丟失！

回答

相關問題