導致後臺無法正常顯示的視口寬度

我遇到了一個問題，即當視口縮小到小於爲我的某些元素指定的大小時，背景顏色意外行爲。當滾動條正確顯示時，背景並不是我所期望的。當視口大或大時，背景會按照預期運行。當用Firebug檢查頁面元素時，看起來body元素即使其內容是內容也不伸縮。什麼導致背景以這種方式表現？導致後臺無法正常顯示的視口寬度

我提供了我認爲是相關的HTML和CSS，但如果我忽略的東西，請讓我知道。

縮水視口例 Broken Example

放大視口例 Working Example

CSS

html 
{ 
    background: #A37C45; 
} 

body 
{ 
    background: 
     #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0; 
} 

#container 
{ 
    width: 100%; 
} 

#header 
{ 
    width: 730px; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 5px; 
    overflow: hidden; 
} 

#main 
{ 
    width: 730px; 
    margin-top: 2px; 
    margin-left: auto; 
    margin-right: auto; 
    overflow: hidden; 
} 

#footer 
{ 
    background: 
     url("../images/backgrounds/grass.png") repeat-x scroll left top; 
    clear: both; 
    width: 100%; 
    overflow: hidden; 
    padding-top: 30px; 
    margin-top: 20px; 
} 

#footercontainer 
{ 
    width: 100%; 
    background-color: #A37C45; 
    margin-top: -1px; 
} 

#footercontent 
{ 
    width: 730px; 
    margin-left: auto; 
    margin-right: auto; 
    padding-bottom: 25px; 
    overflow: hidden; 
}

HTML

<html> 
    <body> 
    <div id="container"> 
     <div id="header"> 
     </div> 
     <div id="main"> 
     </div> 
    </div> 
    <div id="footer"> 
     <div id="footercontainer"> 
     <div id="footercontent"> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

來源

2010-09-20 ahsteele

你看到這種現象的原因是因爲你的width: 100%元件僅取視寬度爲背景的，他們需要渲染的數量。

您可以通過添加一個min-width declaration您body元素的CSS修復。只需將其設置爲最大嵌套元素的寬度：

body { 
    min-width: 730px; 
    background: #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0; 
}

來源

2010-09-20 19:21:12 Pat

只好10個像素添加到730px但是這完全成功了！ – ahsteele 2010-09-20 20:51:40

最小寬度不支持IE，以便使用表達式

body { 
    min-width: 730px; 
    background: #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0; 

    /* IE Version */ 
    width:expression(document.body.clientWidth < 730 ? "728px" : "auto"); 
}

來源

2011-05-31 15:49:20

我沒有看到這在IE中不起作用。我應該知道哪些特定版本？ – ahsteele 2011-05-31 17:10:06

導致後臺無法正常顯示的視口寬度

回答

相關問題