1

我有一个问题，我在几个不同的网站上看到过，但我一直无法找到解决方案。我注意到许多其他人也遇到过类似的问题，但我看到的每个修复都无法在我目前正在处理的网站上运行。基本上我想要做的是有一个响应式布局，其标题具有跨越整个窗口的重复背景和具有固定宽度的主体。基本的 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 确实解决了这个问题。但是，我们需要将主内容区域设置为该宽度。我也尝试将溢出设置为隐藏并在标题上设置浮动，但似乎没有任何问题可以解决这个问题。

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

4

2 回答 2

1

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

这是修复的代码：

.grid-50-50 {
  display: table;
  width: 1030px;
}
于 2013-01-08T19:04:05.280 回答
1

如果您在 HTML5 中执行此操作，我建议您使用 100%<header>标记，然后添加 100% div 'wrapper'....这样您可以获得更大的灵活性。

但是为此...如果您不想编辑标题，请在正文标签中将 min 设置为 1030px ：

body {min-width: 1030px;}

:)

于 2013-01-08T19:24:33.460 回答