用溢出滚动条覆盖背景答案

【问题标题】：Cover background with overflow scroll bar用溢出滚动条覆盖背景
【发布时间】：2015-09-16 12:44:46
【问题描述】：

我希望用图像覆盖整个屏幕。太好了，background-size: cover; 来救援了。但后来我想包含另一个带有滚动条的固定宽度的元素。这样做并缩小屏幕时，不再覆盖整个屏幕。请参阅https://output.jsbin.com/rogupezopu（截图和代码复制如下）。使用溢出滚动条时如何覆盖整个屏幕？

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>
        <style type="text/css">
            body,div {margin:0;padding:0;}

            #wrapper {
                height:840px;
                background-image:url(http://s24.postimg.org/781yqtfdh/background2.jpg);
                background-repeat: no-repeat;
                background-size: cover;
                background-attachment: fixed;  /*http://stackoverflow.com/a/19364033/1032531 Doesn't work*/
                /* background-attachment: scroll; */  /*http://stackoverflow.com/a/23050520/1032531 Doesn't work*/
                /* background-size: 100% 100%; also doesn't work */
                /* background-position: center; probably redundent? */ 
            }
            #content {
                margin:0 auto;
                width: 960px;
                height:100%;
                overflow:auto;
            }
        </style> 
    </head>

    <body>
        <div id="wrapper">
            <div id="content">
                Ius ne quod posidonium, agam apeirian gubergren id eos, dolores percipit vis ex. Ex discere liberavisse his, sonet nominati conclusionemque et vis. Et admodum oporteat sit, eam facer affert mediocritatem ad, mea id omnium instructior. Pri ex natum option incorrupte, sit unum pertinax theophrastus ut.

                Nam an saperet delectus tractatos. Ad option persecuti appellantur usu. Dicta habemus fuisset per ea, ius adhuc iracundia ei. Te timeam integre pro, ex dolore possim audiam vis.

                Nam te tamquam omittam, eu diceret complectitur ius, quem omnesque sensibus in vel. Has eirmod accumsan atomorum ut, vel ei quod omittantur, expetendis neglegentur eu vim. Ad audiam fuisset cum. Quis mutat fabellas te nam, usu ut sumo suscipiantur, eos at lorem aeque graeci. In paulo disputationi ius, vide dissentias sadipscing eos cu.

                Usu te graece vivendo, ludus latine nonumes te has. Pri id quando tantas offendit, nam ea viderer dissentiet. Facilis consequat concludaturque sea ut, an mel persius evertitur eloquentiam. Facilisis repudiare conceptam sit an.
            </div>
        </div>
    </body> 
</html>

【问题讨论】：

你的演示对我来说很好。
对我不起作用。您需要水平滚动条是否有特殊原因？不能只在内容 div 中添加“max-width: 100%”吗？
i.imgur.com/RMBSnuN.png
@divy3993 您需要调整窗口大小，使其宽度小于 960，然后向右滚动。
@Michael #content 中的内容是用户通过 tinymce 提供的，可能不会很好地折叠。

标签： html css

【解决方案1】：

您的#content 具有固定宽度。

#wrapper 默认有width:100%。

#wrapper 将具有屏幕的宽度。

所以，问题在于background-size:cover 在#wrapper 上，因此将被限制在屏幕宽度上。

解决方案？将背景移动到#content 或将#wrapper 的宽度增加到固定值也与min-width: 960px 一起使用。

另一种解决方案是使用width: 100%; max-width: 960px; 限制#content 的大小

解决方案 1：

body,
div {
  margin: 0;
  padding: 0;
}
#wrapper {
  height: 840px;
  background-image: url(http://s24.postimg.org/781yqtfdh/background2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
#content {
  margin: 0 auto;
  width: 960px;
  height: 100%;
  overflow: auto;
}
@media screen and (max-width: 960px) {
  #wrapper {
    background: none;
  }
  #content {
    background-image: url(http://s24.postimg.org/781yqtfdh/background2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
  }
}

<div id="wrapper">
  <div id="content">
    Ius ne quod posidonium, agam apeirian gubergren id eos, dolores percipit vis ex. Ex discere liberavisse his, sonet nominati conclusionemque et vis. Et admodum oporteat sit, eam facer affert mediocritatem ad, mea id omnium instructior. Pri ex natum option
    incorrupte, sit unum pertinax theophrastus ut. Nam an saperet delectus tractatos. Ad option persecuti appellantur usu. Dicta habemus fuisset per ea, ius adhuc iracundia ei. Te timeam integre pro, ex dolore possim audiam vis. Nam te tamquam omittam,
    eu diceret complectitur ius, quem omnesque sensibus in vel. Has eirmod accumsan atomorum ut, vel ei quod omittantur, expetendis neglegentur eu vim. Ad audiam fuisset cum. Quis mutat fabellas te nam, usu ut sumo suscipiantur, eos at lorem aeque graeci.
    In paulo disputationi ius, vide dissentias sadipscing eos cu. Usu te graece vivendo, ludus latine nonumes te has. Pri id quando tantas offendit, nam ea viderer dissentiet. Facilis consequat concludaturque sea ut, an mel persius evertitur eloquentiam.
    Facilisis repudiare conceptam sit an.
  </div>
</div>

解决方案 2：

在#wrapper 中使用min-width。

body,
div {
  margin: 0;
  padding: 0;
}
#wrapper {
  height: 840px;
  background-image: url(http://s24.postimg.org/781yqtfdh/background2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-width: 960px;
}
#content {
  margin: 0 auto;
  width: 960px;
  height: 100%;
  overflow: auto;
}

<div id="wrapper">
  <div id="content">
    Ius ne quod posidonium, agam apeirian gubergren id eos, dolores percipit vis ex. Ex discere liberavisse his, sonet nominati conclusionemque et vis. Et admodum oporteat sit, eam facer affert mediocritatem ad, mea id omnium instructior. Pri ex natum option
    incorrupte, sit unum pertinax theophrastus ut. Nam an saperet delectus tractatos. Ad option persecuti appellantur usu. Dicta habemus fuisset per ea, ius adhuc iracundia ei. Te timeam integre pro, ex dolore possim audiam vis. Nam te tamquam omittam,
    eu diceret complectitur ius, quem omnesque sensibus in vel. Has eirmod accumsan atomorum ut, vel ei quod omittantur, expetendis neglegentur eu vim. Ad audiam fuisset cum. Quis mutat fabellas te nam, usu ut sumo suscipiantur, eos at lorem aeque graeci.
    In paulo disputationi ius, vide dissentias sadipscing eos cu. Usu te graece vivendo, ludus latine nonumes te has. Pri id quando tantas offendit, nam ea viderer dissentiet. Facilis consequat concludaturque sea ut, an mel persius evertitur eloquentiam.
    Facilisis repudiare conceptam sit an.
  </div>
</div>

【讨论】：

很好的解释，但不认为它解决了我的问题。 #content 如果需要，需要一个带有滚动条的固定宽度，所以 max-width: 960px;。当窗口已满时，我绝对不想要覆盖的白色侧边栏。
好多了！也许只是在#wrapper 上使用min-width 代替？ output.jsbin.com/gunatohepa/1
您也可以这样做。这就是我的意思：“或者将#wrapper 宽度也增加到一个固定值。”
我以前从未使用过媒体查询，需要学习，但会使用min-width。感谢您的帮助。
@user1032531 然后作为解决方案添加。

【解决方案2】：

将overflow: auto; 添加到您的#wrapper 元素中。

这样做，您的包装器将扩展到其内容，并且将是滚动的，而不是您的文档。

【讨论】：

实际上确实如此，只是您可能看不到它，因为您的高度固定。您首先需要滚动到底部才能看到水平滚动条。