div 容器上的背景颜色不随页面滚动答案

【问题标题】：Background color on div container does not scroll with pagediv 容器上的背景颜色不随页面滚动
【发布时间】：2018-07-17 06:34:03
【问题描述】：

我尝试了大约 10 种我在本网站和其他网站上找到的不同解决方案，但仍然无法弄清楚。希望得到一些帮助，（编码新手）谢谢。

如上所述，我的 div 容器（我的“侧边栏”）的背景颜色不会随页面滚动，即使我在容器及其父级（body 标记）上的高度为 100%。我怀疑body标签是问题，因为它把它作为浏览器窗口的100%，而不是整个页面。但如果我把它拿出来，div 背景会缩小到内容。 “.personal”是我的侧边栏，“.wrapper”是我在页面上的主要内容。

我的样式标签/CSS 是什么样的：

<div class="style">
    <style>

body {
        margin: 0 auto; 
        position: absolute;
        height: 100%;
    }

.wrapper {
        width: 600px;
        margin-left: 20px;
        float: left;
    }

.personal {
        float:left;
        background-color: rgba(29, 32, 44, 0.85);
        color: snow;
        width: 300px;
        height: 100%;
    }

    </style>
</div>

我的 HTML 是什么样子的：

<html>
  <head>
     <style> </style>
  </head>
    <body>
         <div class="personal"> content </div>
         <div class="wrapper"> content </div>
    </body>
<html>

【问题讨论】：

我现在不太确定我的答案是否就是您要找的...
@Gezzasa 不完全是。您的解决方案有效，但不喜欢它如何影响内容，因为当您调整浏览器大小时它会全部调整大小。不过谢谢
这就是为什么我提到你再次用静态宽度替换百分比宽度:)。由于 jsfiddle 的视野狭窄，我使用了百分比。
啊，即使是我的 px 测量值，它也只能随窗口调整大小。仍然没有滚动
不确定要滚动的内容。它们都是 100% 的视口。如果你想让一个根据内容相等，那么你可以使用JS或显示表格视图。这是我最好的猜测。如果有人有的话，我希望看到一个纯 CSS 解决方案。

标签： html css

【解决方案1】：

我必须更改几行才能完成这项工作。

https://jsfiddle.net/8e95zqmt/

几个问题。如果您的元素上没有 box-sizing: border-box; 样式，则填充和边距将增加您的宽度。边距仍然会增加宽度。因此，如果您的包装器是600px，那么使用margin-left: 20px 它实际上是620px。我将您的宽度更改为百分比，但如果您有更大的视口，您可以将其更改回 px。 jsfiddle 很小。

百分比高度也意味着它是根据视口而不是内容计算的。可能有一个我不知道的 css 解决方案，但我目前知道的唯一方法是使用 javascript。

这是示例，但使用的是原始静态宽度

https://jsfiddle.net/vj4tu2zj/

【讨论】：

【解决方案2】：

.personal {
        background-color: rgba(29, 32, 44, 0.85);
        color: snow; 
        Position:fixed;
        left:0;
        width: 300px;
        height: -webkit-fill-available;
    }

使位置固定

【讨论】：

不是我的想法，但我会很好地修复它并与滚动一起移动......但现在它使另一个容器折叠在侧栏后面。他们不再漂浮。将 .wrapper 更改为固定后，如何使 .wrapper 浮动到 .personal 一侧的右侧
好的，移除固定位置，试试这个“高度：-webkit-fill-available;”
仍然没有运气

【解决方案3】：

非常简单。只需将“高度”更改为“自动”即可。

.personal {
        float:left;
        background-color: rgba(29, 32, 44, 0.85);
        color: snow;
        width: 300px;
        height: auto;
    }

【讨论】：

没用，只是把背景色缩小到侧边栏内容的底部

【解决方案4】：

为什么你的标签被包裹在一个 div 标签中？在没有 DIV 的 html 中插入样式，它会正常工作。

<html>
 <head>
  <style>
    body {
      margin: 0 auto;
      position: absolute;
      height: 100%;
    }

    .wrapper {
      width: 600px;
      margin-left: 20px;
      float: left;
    }

    .personal {
      float: left;
      background-color: rgba(29, 32, 44, 0.85);
      color: snow;
      width: 300px;
      height: 100%;
    }
  </style>
 </head>

 <body>
  <div class="personal"> content </div>
  <div class="wrapper"> content </div>
 </body>
</html>

【讨论】：

不知道为什么，但我把它拿出来了，我的代码反映了你的，问题仍然存在
这是截图dropbox.com/s/91brepj70hmxzkp/…