Question

我有一个网页，其中有一个标题部分，然后是一些内容。在内容中，我有一个网格，一些视图显示许多列（取决于屏幕大小）将在浏览器上创建一个水平滚动条）

我的HTML看起来像这样：

 <head></head>
 <body>
      <div id="TopHeader"></div>
      <div id="MainContent"></div>
 </body>

“MainContent”中的内容通常比屏幕更宽。现在我有我的css为我的div这样：

 #TopHeader {
    background-color: black;
}

但是当我向右滚动时，此部分的背景为白色。我试着通过这样做来解决这个问题：

#TopHeader {
min-width:1150px;
    background-color: black;
 }

这有点帮助，但这是一个硬编码的解决方案，如果宽度恰好是＆gt; 1150px，我遇到了同样的问题。

我能想到的唯一另一件事就是将TopHeader放在main中（这将解决这个问题）。像这样的东西：

 <head></head>
 <body>
      <div id="MainContent">
            <div id="TopHeader"></div>
       </div>
 </body>

但是问题是我想在我的内容周围填充（什么是MainContent部分，我不希望这个填充在顶部标题周围，所以似乎不起作用。如果我创建了一个像这样的新div

 <head></head>
 <body>
      <div id="MainContent">
            <div id="TopHeader"></div>
            <div id="InnerMainForPadding"></div>
       </div>
 </body>

我回到上面列出的原始问题。

有什么建议吗？

Answer 1

将其更改为：

html, body, #TopHeader { 
    background-color: black; 
}

Answer 2

如何在内容包装器而不是浏览器窗口上设置滚动条？

#MainContent {
    overflow: auto;
}

现场演示： http://jsfiddle.net/SUfkh/2/show/

当内容强制水平滚动时，我应该有宽度为100％的div吗？

2 个答案: