Html 如何使用全宽标题和固定宽度正文制作响应性web布局_Html_Css

Html 如何使用全宽标题和固定宽度正文制作响应性web布局

html css

Html 如何使用全宽标题和固定宽度正文制作响应性web布局,html,css,Html,Css,我在几个不同的网站上看到了一个问题，但我从来没有找到解决方案。我注意到许多其他人也有类似的问题，但我看到的每一个修复都不适用于我目前正在使用的站点。基本上，我想做的是有一个响应性的布局，标题有一个覆盖整个窗口的重复背景，主体有一个固定的宽度。基本html如下所示： <html> <body> <div id="header">Header content</div> <div id="main-content">Main

我在几个不同的网站上看到了一个问题，但我从来没有找到解决方案。我注意到许多其他人也有类似的问题，但我看到的每一个修复都不适用于我目前正在使用的站点。基本上，我想做的是有一个响应性的布局，标题有一个覆盖整个窗口的重复背景，主体有一个固定的宽度。基本html如下所示：

<html>
<body>
    <div id="header">Header content</div>
    <div id="main-content">Main content here</div>
</body>
</html>

html, body{
      width:100%;
}
#header{
      width:100%;
}
#main-content{
      width:1000px;
}

这段代码并不是为了代表我正在工作的站点上的实际内容，而是为了让您了解我们正在尝试做什么。要查看实际的html、css等，请转到并查看。网站最初看起来不错，但如果你缩小窗口的大小，使其有一个水平滚动条，然后向右滚动并查看标题，你会发现重复的背景不会达到全宽

我确实发现，删除主要内容上的width:1000px确实解决了这个问题。但是，我们需要将主内容区域设置为该宽度。我也尝试过将溢出设置为隐藏，并在标题上设置浮动，但似乎没有任何方法可以解决这个问题

这对于运行在平板电脑、智能手机等设备上的Android/iOS系统来说尤其是一个问题。如果您能在这个问题上给我任何帮助，我将不胜感激。

问题是，您的主内容div设置为1000px（水平填充为30px），而CSS文件将头指定为960px。增加标题的宽度以匹配内容将纠正此问题

以下是修复程序的代码：

.grid-50-50 {
  display: table;
  width: 1030px;
}

如果您是在HTML5中使用，我建议使用100%的标签，然后添加100%的div“wrapper”……这样您就可以有更大的灵活性

但是对于这个……如果你不想编辑标题，那么在主体标签中将你的最小值设置为1030px：

正文{最小宽度：1030px；}

：）

没问题，德里克。如果你认为它能回答这个问题，你就应该这么做@德里克这是一个稍微复杂一点的问题。与此问题相同的问题可以解决，但同时还有其他问题。为了解决这个特殊问题，您可以看到#content div的宽度为1114px，而body的最小宽度仅设置为960px。把它改成1114px，你就可以出发了。但是，您会发现您的页脚看起来仍然不理想。你的HTML和CSS可能还有其他结构性问题导致了这一问题。是的，我看到Riskbreaker建议修复原始站点，所以我将主体的最小宽度设置为1120px，这似乎解决了这个问题。谢谢谢谢你的建议。我更愿意使用标签，但我们不使用这些标签还有其他原因。我最终在这个网站上使用了jmeas的答案，但我在另一个网站上使用了你的答案，这个网站的页脚也有类似的问题。谢谢你的洞察力。