html怎么获得文档宽度,关于html：在水平滚动下div占文档宽度的100％

对不起，这个问题一定很愚蠢。

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

但是，对于水平滚动条，我希望#header占据宽度的100％，而不是视口的宽度，而是文档的宽度；以便在用户滚动时不会被打断。

这是代码：

test

this should take the entire width, even when

scrolling to the right

this causes a horizontal

scrollbar on narrow displays

这是一个示例：http://a3nm.net/share/test_157235.html

我希望红色的#header div与下面的#contents一样宽。对于该示例，我模拟了#content具有min-width的宽度，但是总的来说，我希望一种无论#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%;

}

这使得包装器至少占据了视口宽度的100％(由于CSS重置，因此没有水平滚动条)，并且它是绝对的，因此在需要水平滚动条的情况下，它以某种方式占据了文档宽度的100％，这是因为＃内容。

完整的解决方案：

test

html,body {

padding: 0;

margin: 0;

}

this should take the entire width, even when

scrolling to the right

this causes a horizontal

scrollbar on narrow displays

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

width:100%只会使一个元素与其父元素一样宽；在这种情况下是视口。据我所知，对您的问题的最佳解决方案是将标头固定在视口中，而不是扩展其宽度：

width: 100%;

position: fixed;

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

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

编辑：如果您不需要将标题固定为垂直滚动，则我不确定存在纯CSS解决方案。您可以使用javascript隐藏滚动中的标头元素。

谢谢！这几乎可以满足我的要求，只是在垂直滚动时我不希望div保持固定，而是希望它与其余内容一起滚动。这可能吗？ (我应该在原始问题中提到这一点，我对其进行了编辑。)

@ a3nm：更新了我的答案。我没有任何纯CSS方法可以在一个方向上设置固定位置。但是，您可以使用一些JS来实现。

当然，这可以使用Javascript完成，但我希望使用纯CSS的答案。我更新了问题以反映这一点。谢谢！

为什么要避免使用JS？有什么具体原因吗？

仅出于一般原因：JS的执行成本很高，并且并非所有浏览器和所有浏览器配置都支持JS。

test

body {

margin:0;

padding:0;

}

.wrapper {

margin:0 auto;

width:1000px;

min-width:1000px;

background:green;

border:1px solid green;

}

footer {

background:blue;

}

This should take the entire width, even when scrolling to the right

This causes a horizontal scrollbar on narrow displays

好的，我要做的就是更改您的div。有一个名为header的语义标签，它与div一样好，甚至没有更好。但是，您要问的是div的一些样式。

您需要添加一个边距：0自动；您的div位于哪个中心在这种情况下，您将拥有内容的包装器。

我还添加了边距和填充0，因为您希望标题填充整个宽度。

对不起，我的英语不好。 :-)

抱歉，但这也不起作用：a3nm.net/share/test2_821611.html-当在狭窄的窗口中显示该内容并向右滚动时，红色标题仍然在文档右端之前停止。

您始终可以将min-width更改为与wrapper相同的1000px，并将宽度设置为100％，这将有助于在窗口大于1000px时将标头设置为wrapper或更长。

min-width只是一个例子，对于我的实际用例，#content最终可能会以我无法控制的方式大于1000px且大于窗口。

您是否尝试过用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;

}

谢谢你的建议。我尝试了此操作，但似乎无法解决问题，请参阅a3nm.net/share/test2_699666.html

就是这样，我确定您的问题。您希望标题填充整个100％的宽度。而您的内容不？

我希望红色标题填充宽度的100％，包括当我向右滚动时右边的宽度。内容最终也将占用宽度的100％，但我事先不知道内容的宽度是多少