对不起,这个问题一定很愚蠢。
我有一个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%,但我事先不知道内容的宽度是多少