Question

我遇到了一个问题，我已经看到了几个不同的网站，我从来没有找到解决方案。我注意到很多其他人都遇到过类似的问题，但我看到的每一个修复程序都没有在我正在处理的网站上工作。基本上我要做的是有一个响应式布局，标题具有跨越整个窗口的重复背景和具有固定宽度的主体。基本的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/并查看它。该网站最初看起来很好，但如果你缩小窗口的大小，以便有一个水平滚动条，然后滚动到右边，看看标题，你会看到重复背景不是全宽。

我发现的一件事是删除主内容上的宽度：1000px确实解决了这个问题。但是，我们需要将主内容区域设置为该宽度。我也试过设置溢出来隐藏和设置标题上的浮动，但似乎没有什么能解决问题。

对于在平板电脑，智能手机等设备上运行的Android / iOS系统，这尤其是一个问题。我们非常感谢您在这个问题上给我的任何帮助。

Answer 1

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

以下是修复的代码：

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

Answer 2

如果你在HTML5中这样做，我建议使用100％<header>标签，然后添加一个100％div'包装'....这样你就可以有更大的灵活性。

但是对于这个......如果你不想编辑标题，那么在你的正文标记中将你的最小值设置为1030px：

body {min-width: 1030px;}

：）

如何使用全宽标题和固定宽度的主体制作响应式Web布局

2 个答案: