使 div 在水平滚动下占据整个文档宽度

Question

使 div 在水平滚动下占据整个文档宽度

htmlcssscrollwidth

3

很抱歉，这可能是一个非常愚蠢的问题。

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

然而，有了水平滚动条，我希望#header占据整个文档的100％宽度，而不是视口的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 一样宽。在这个例子中，我用 min-width 模拟了 #content 的宽度，但通常情况下，我希望有一种方法，无论 #contents 的宽度如何，都能起作用。

请注意，如果 #content 足够高以至于导致垂直滚动，当用户向下滚动时，我希望标题会随着内容的顶部滚动而消失。

我相信这可以通过 Javascript 实现，但我正在寻找一种纯 CSS 解决方案。

谢谢！

- a3nm

4个回答

1

width:100% 只会使元素与其父元素一样宽；在这种情况下是视口。根据我理解，对于你的问题，最好的解决方案是将标题固定在视口内，而不是扩展其宽度：

width: 100%;
position: fixed;

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

话虽如此，我建议使主要内容对各种屏幕宽度响应，而不是允许水平滚动条 - 水平滚动条通常会导致糟糕的用户体验。

编辑：如果您需要标题不能固定垂直滚动，则我不确定是否存在纯CSS解决方案。您可以使用JavaScript在滚动时隐藏标题元素。

- Yair

谢谢！这几乎是我想要的，除了当垂直滚动时，我不希望div保持固定，我希望它随着其他内容一起滚动。这可能吗？（我应该在原始问题中提到这一点，我已经编辑过了。） - a3nm

@a3nm: 我更新了我的回答。我不知道有任何纯CSS方法可以仅在一个方向上设置固定位置。然而，您可以通过一些JS实现这一点。 - Yair

当然可以使用JavaScript来完成，但我更喜欢纯CSS的解决方案。我已经更新了问题以反映这一点。谢谢！ - a3nm

为什么你想要避免使用JS？有具体的原因吗？ - mujaffars

仅仅是一些普遍的原因：JS执行成本高，并且并不被所有浏览器和所有浏览器配置所支持。 - a3nm

0

你尝试过使用Eric Meyers的重置CSS吗？你需要将你的#header的padding和margin设置为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;
}

- Jacob

1

谢谢您的建议。我尝试了这个方法，但似乎并没有解决问题，请参见http://a3nm.net/share/test2_699666.html。 - a3nm

1

只是为了确保我理解您的问题。您想让标题填满整个100%的宽度，而内容不填满？ - Jacob

我希望红色标题栏可以填满100％的宽度，包括右侧在向右滚动时显示的内容。内容最终也会占据100％的宽度，但我事先不知道内容的宽度是多少。 - a3nm

0

<!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的样式问题。您需要添加margin: 0 auto;来使您的div居中。在这种情况下，是包装器，其中您将拥有您的内容。我还添加了边距和填充0，因为您希望header填满整个宽度。

对不起我的英文不太好。:-)

- Jacob

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

你可以随时将min-width更改为1000px与包装器(wrapper)相同，并将宽度设置为100％，这将有助于头部在窗口大于1000px时与包装器长度相同或更长。 - Jacob

min-width只是一个例子，对于我的实际用例，#content可能会比1000px更宽，并且比窗口更宽，以一种我无法控制的方式。 - a3nm

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- a3nm · Accepted Answer

好的，我找到了一种方法。首先，将html和body设置为0的边距和填充，作为CSS重置：

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

接下来，将 #header 和 #content 都放在一个 div#wrapper 中，并加上如下样式：

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

这样做可以使包装容器至少占据视口宽度的100％（由于CSS重置而没有水平滚动条），并且它的绝对定位使其在因#content需要水平滚动条时以某种方式占据文档宽度的100％。

完整解决方案：

<!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。