Question

为什么我网站的上半部分（header-wrapper和menu-wrapper）具有响应能力，但底部（featured-wrapper和footer）不是？< / p>

最近，我注意到当屏幕小于约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;
    ...
}

这样它将延伸到其父级的宽度，但绝不会超过1200px宽。

Answer 2

这是因为这个css：

overflow: hidden;

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

CSS overflow Property

overflow属性指定内容溢出元素框时会发生什么。     hidden溢出被剪切，其余内容将不可见

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

2 个答案: