爲什麼只有我的網站的上半部分響應？

爲什麼我的網站上半部分（header-wrapper和menu-wrapper）有反應，但底部（featured-wrapper和footer）不是？爲什麼只有我的網站的上半部分響應？

最近，我已經注意到，當屏幕小於1000px時，這個響應式網站的行爲很奇怪。標題和導航菜單收縮以適應屏幕大小，但名爲#featured-wrapper和footer的內容包裝不包含。內容被切斷，並且它們被切斷的位置被替換爲與頁腳顏色相同的深色木炭彩條。當網站在更大的瀏覽器中查看時，它的中心位置非常好。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
</head> 
<body> 
<div id="header-wrapper"> 
<div id="header" class="container"> 
<a href=""></a> 
<h1></h1> 
<br> 
<h2></h2> 
</div> 
</div> 
<div id="menu-wrapper"> 
<div id="menu"> 
<ul> 
<li> 
<!-- content --> 
</li> 
</ul> 
</div> 
</div> 
<div id="wrapper"> 
<div id="featured-wrapper"> 
<div class="extra2 container"> 
<div class="ebox1"> 
</div> 
<div class="title"> 
<!-- content --> 
</div> 
</div> 
</div> 
</div> 
<footer> 
<div id="copyright" class="container"> 
<p></p> 
</div> 
</footer> 
</body> 
</html>

CSS爲#featured-wrapper是：

#featured-wrapper 
{ 
    overflow: hidden; 
    padding: 10em 0em; 
    background: #FFF; 
    text-align: center; 
}

來源

2015-01-12 Joansy

你的CSS指定

.container { 
    width: 1200px; 
    ... 
}

這是在頁腳和主要內容都使用

。一個可能的修復程序，這是將其更改爲

.container { 
    max-width: 1200px; 
    ... 
}

，這樣它會延伸到其母公司的寬度，但永遠不會大於1200像素寬。

來源

2015-01-12 01:00:17 joshhunt

謝謝joshhunt，這對我來說非常合適。添加這三個小字母可以清除側面的木炭條。 :) – Joansy

不用擔心，很高興我能幫上忙。 – joshhunt

這是因爲這個CSS的：

overflow: hidden;

這防止#featured-wrapper元件以顯示滑桿：

CSS overflow Property

overflow屬性指定如果內容溢出元素的框會發生什麼情況。 hidden溢出被剪裁，並對其內容的其餘部分將是無形的

來源

2015-01-12 00:54:50 VMAtm

爲什麼只有我的網站的上半部分響應？

回答

相關問題