在水平滚动下 div 占文档宽度的 100%

Question

抱歉，这个问题一定很愚蠢。

我有一个 div #header 和一个 div #content。 #content 的内容可能很宽，甚至比视口还宽。在这种情况下，出现水平滚动条，这很好。

但是，对于水平滚动条，我希望#header 占据 100% 的宽度，而不是视口的宽度，而是文档的宽度；这样当用户滚动时它就不会被打断。

代码如下：

<!DOCTYPE html>
<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>test</title>
</head>
<body>
  <div id="header" style="background:red;">this should take the entire width, even when
    scrolling to the right</div>
  <div id="content" style="min-width:1000px; min-height:1000px; border:1px solid green;">this causes a horizontal
    scrollbar on narrow displays</div>
</body></html>

这里有一个例子：http://a3nm.net/share/test_157235.html

我希望红色的#header div 与下面的#contents 一样宽。例如，我模拟了#content 的宽度为最小宽度，但总的来说，我想要一种无论#contents 恰好具有什么宽度都有效的方法。

请注意，如果#content 足够高以导致垂直滚动，我希望当用户向下滚动时，页眉与内容顶部一起滚动。

我确信这可以在 Javascript 中完成，但我会寻找一个纯粹的 CSS 解决方案。

谢谢！

Answer 1

你试过用 Eric Meyers 重置 css 吗？您需要将#header('s) 的填充和边距设置为 0。

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

Answer 2

<!DOCTYPE html>
<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>test</title>
 <style>
    body {
        margin:0;
        padding:0;
    }
    .wrapper {
        margin:0 auto;
        width:1000px;
        min-width:1000px;
        background:green;
        border:1px solid green;
    }
    footer {
        background:blue;
    }
    </style>
</head>
<body>
<header style="background:red;">
 This should take the entire width, even when scrolling to the right
</header>
<div class="wrapper">
This causes a horizontal scrollbar on narrow displays

</div>
</body>
</html>

好的，我所做的就是更改您的 div。有一个名为 header 的语义标签，即使不比你的 div 好，也一样好。但是您要问的是 div 的一些样式。您需要添加边距：0 auto；哪个中心你 div。在这种情况下，包装器将包含您的内容。我还添加了边距和填充 0，因为您希望 header 填充整个宽度。

抱歉我的英语不好。 :-)

Answer 3

width:100% 只会使元素与其 parent 一样宽；在这种情况下是视口。据我所知，解决您的问题的最佳方法是基本上 pin 视口内的 header 而不是扩大其宽度：

width: 100%;
position: fixed;

具有 position: fixed; 的元素出现在页面上常规元素流之外，因此您需要在主要内容 div 的顶部添加边距以进行补偿。因此，如果 header 的高度为 50px，则需要将 margin-top: 50px; 添加到内容包装器。

综上所述，我建议让主要内容响应各种屏幕宽度，而不是允许水平滚动条 - 水平滚动条通常会导致糟糕的用户体验。

编辑：如果您需要固定 header 到 而不是 以进行垂直滚动，我不确定是否存在纯粹的 CSS 解决方案。您可以使用 javascript.

在滚动中隐藏 header 元素

Answer 4

好的，我找到办法了。首先，将 html 和正文设置为 0 的边距和填充，因为 CSS 重置将：

html, body
{
  padding: 0;
  margin: 0;
}

接下来，将#header 和#content 包含在div #wrapper 中，样式如下：

#wrapper
{
  position:absolute;
  min-width: 100%;
}

这使得包装器至少占据视口宽度的 100%（由于 CSS 重置导致没有水平滚动条），并且它是绝对的使得它以某种方式占据文档宽度的 100%如果因为#content.

而需要水平滚动条

完整的解决方案：

<!DOCTYPE html>
<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>test</title>
  <style type="text/css">
  html,body {
    padding: 0;
    margin: 0;
  }
  </style>
</head>
<body>
  <div style="position:absolute; min-width: 100%;">
  <div id="header" style="background:red;">this should take the entire width, even when
    scrolling to the right</div>
  <div id="content" style="min-width:1000px; min-height:1000px; border:1px solid green;">this causes a horizontal
    scrollbar on narrow displays</div>
  </div>
</body></html>

结果：http://a3nm.net/share/test_971696.html

在水平滚动下 div 占文档宽度的 100%

Have div take 100% of document width under horizontal scrolling

html

css

scroll

width