我有一个问题，我在几个不同的网站上看到过，但我一直找不到解决方案。我注意到许多其他人也遇到过类似的问题，但我看到的每个修复程序都无法在我当前工作的网站上运行。基本上我想要做的是有一个响应式布局，其中的标题具有跨越整个窗口的重复背景和具有固定宽度的正文。基本的 html 看起来像这样:
<html>
<body>
<div id="header">Header content</div>
<div id="main-content">Main content here</div>
</body>
</html>
css 是这样的:
html, body{
width:100%;
}
#header{
width:100%;
}
#main-content{
width:1000px;
}
此代码并不代表我正在处理的网站上的实际内容，而是让您了解我们正在尝试做什么。要查看实际的 html、css 等，请转到 http://236887.site-show.com/看看它。该站点最初看起来不错，但是如果您缩小窗口的大小以便有一个水平滚动条，然后向右滚动并查看标题，您将看到重复的背景不会达到全宽.
我确实发现的一件事是删除主要内容上的 width:1000px 确实解决了这个问题。但是，我们需要将主要内容区域设置为该宽度。我也尝试过将溢出设置为隐藏并在标题上设置 float ，但似乎没有任何办法可以解决这个问题。
对于在平板电脑、智能手机等上运行的 Android/iOS 系统来说，这尤其是一个问题。如果您能就此问题给我任何帮助，我们将不胜感激。
最佳答案
问题是您的 main-content div 设置为 1000px(水平填充 30px)，而您的 CSS 文件指定了标题为 960px。增加标题的宽度以匹配您的内容将解决此问题。
修复代码如下:
.grid-50-50 {
display: table;
width: 1030px;
}
关于html - 如何制作具有全宽标题和固定宽度正文的响应式网页布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14222046/