CSS/HTML - 在瀏覽器調整大小的單列布局中溢出

我試圖讓單列布局工作。該頁面有三個部分，一個標題區域，一個內容區域和一個頁腳區域。每個部分都有不同的背景圖像，我想跨越用戶屏幕上可視區域的整個寬度。如下面的代碼所示，我將這些部分拆分爲div，以便中間的內容區域隨着內容的增長而增長。CSS/HTML - 在瀏覽器調整大小的單列布局中溢出

我的問題是，由於我通過在瀏覽器（Chrome）中按ctrl +增加文本的大小，傳送帶部分溢出背景區域。下面給出調整前後的屏幕截圖。

HTML/CSS代碼模型很簡單，但我無法弄清楚爲什麼會發生溢出。有任何想法嗎？我是CSS/XHTML的新手 - 是否有任何其他標準方法來實現我正在嘗試完成的目標？

Before resizing

After resizing

<html> 
<head> 
<title>Insert title here</title> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 

<div id="header_container"> 
    <div id="header"> 
     Header text 
    </div> 
</div> 

<div id="content_container"> 
    <div id="content"> 
     The content 

     <div id="carousel"> 
     The carousel 
     </div> 

     <div id="clear_div"> 
     </div> 
    </div> 
</div> 

<div id="footer_container"> 
    <div id="footer"> 
     The footer 
    </div> 
</div> 

</body> 
</html>

下面是HTML的CSS：

#header_container { 
    width: 100%; 
    background-color: green; 
} 

#header { 
    width: 960px; 
    margin: auto; 
} 

#content_container { 
    width: 100%; 
    background-color: lightblue; 
} 

#content { 
    width: 960px; 
    margin: auto; 
    position: relative; 
} 

#carousel { 
    float: right; 
    width: 300px; 
    height: 200px; 
    background-color: red; 
} 

#clear_div { 
    clear: both; 
} 

#footer_container { 
    width: 100%; 
    background-color: lightgray; 
    clear: both; 
} 

#footer { 
    width: 960px; 
    margin: auto; 
}

來源

2011-10-26 ARV

的問題是，「寬度：100％;」 #content_container（藍色背景）不是根據實際內容寬度計算，而是從瀏覽器窗口寬度計算。所以當時窗口寬度變得小於＃內容寬度（固定在960px），＃內容開始從背景出來。

實施例：

你的瀏覽器窗口的寬度是500像素。
#content_container，#header_container和#footer_container 「寬度：100％」也成爲500像素。
＃內容寬度= 960px，這是440px超過#content_container寬度。
所以右側的＃內容從出來#content_container爲440px。

然後你在瀏覽器中增加的大小同樣的事情發生（＃內容寬度變得比#content_container寬度）。

您可以修復它，例如，通過添加屬性「min-width：960px;」到#content_container，#header_container和#footer_container所以它們將始終是相同的寬度或更多。

編輯：看最小寬度的實例：http://jsfiddle.net/Xqtuh/

來源

2011-10-26 18:14:59

是的，就是這樣。謝謝！ – ARV

CSS/HTML - 在瀏覽器調整大小的單列布局中溢出

回答

相關問題