gpt4 book ai didi

html - 为什么只有我网站的上半部分有响应?

转载 作者:行者123 更新时间:2023-11-28 17:20:53 25 4
gpt4 key购买 nike

为什么我网站的上半部分(header-wrappermenu-wrapper)是响应式的,但底部(featured-wrapperfooter) 不是吗?

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

最佳答案

您的 css 指定

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

用于页脚和主要内容。一种可能的解决方法是将其更改为

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

这样它将拉伸(stretch)到其父级的宽度,但绝不会超过 1200 像素宽。

关于html - 为什么只有我网站的上半部分有响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27893867/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com