抱歉，这个问题一定很愚蠢。
我有一个 div #header 和一个 div #content。 #content 的内容可能很宽，甚至比视口(viewport)还宽。在这种情况下，会出现一个水平滚动条，这很好。
但是，对于水平滚动条，我希望#header 占据 100% 的宽度，而不是视口(viewport)的宽度，而是文档的宽度；这样当用户滚动时它就不会被打断。
代码如下:
<!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 解决方案。
谢谢!
最佳答案
好的，我找到了一个方法。首先，将 html 和 body 设置为 margin 和 padding 为 0，因为 CSS 重置会:
html, body
{
padding: 0;
margin: 0;
}
接下来，将#header 和#content 包含在具有以下样式的div #wrapper 中:
#wrapper
{
position:absolute;
min-width: 100%;
}
这使得 wrapper 占据至少 100% 的视口(viewport)宽度(由于 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>
关于html - 在水平滚动下让 div 占文档宽度的 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32234866/