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

Question

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

#featured-wrapper CSS是：

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

Answer 1

您的CSS指定

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

在页脚和主要内容中都使用了它。 一种可能的解决方法是将其更改为

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

因此它将延伸到其父对象的宽度，但永远不会超过1200像素。

Answer 2

发生这种情况是由于以下CSS：

overflow: hidden;

这样可以防止#featured-wrapper元素显示滑动条：

CSS溢出属性

溢出属性指定如果内容溢出元素的框会发生什么。 hidden溢出被裁剪，其余内容将不可见

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-01-12 01:00:17

解决方案2
0 2015-01-12 00:54:50

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-01-12 01:00:17

解决方案2 0 2015-01-12 00:54:50

解决方案1
1 已采纳 2015-01-12 01:00:17

解决方案2
0 2015-01-12 00:54:50