为什么只有我的网站的上半部分响应？

为什么我的网站上半部分（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

为什么只有我的网站的上半部分响应？

回答

相关问题