如何组合高度和最小高度以始终将 div 拉伸到底部并保持背景可见

Question

我尝试了很多建议，但到目前为止没有任何效果。上下文：我有一个居中的主要部分（白色背景），使用 flex 可以很好地延伸到页面底部。看这张图片：

现在，网站上有一个部分包含很多内容。问题是滚动会带来白色背景，而图像应该保持固定：

我已经能够修复它，但这打破了第一个视图（见下文）。这是到目前为止的 HTML 和 CSS（也使用 Bootstrap）。

<body>
  <div class="bg flex-column d-flex">
    <header class="container">...</header>
    <div class="container" flex-grow-1 flex-shrink-0">
      <main role="main" class="h-100">
         ...
      </main>
    </div>
  </div>
</body>

body, html {
    height: 100%;
    margin: 0;
}

.bg {
    background-image: url("../images/bg.jpg");
    height: 100%;
    background-position: center;
    background-repeat: repeat-y;
    background-size: cover;
    background-attachment: fixed;
}

“修复”

通过将 css 更改为：

body, html {
    min-height: 100%; /* ! */
    margin: 0;
}

滚动的白色背景问题已修复。但是，现在我的其他页面都坏了，因为 div 不再延伸到页面底部。:

感谢任何帮助。

Answer 1

只需将 overflow: scroll 添加到 .bg div，这样所有在 div 内溢出的内容都在父级 div 的边界内, 带有滚动条。

演示

body, html {
    height: 100%;
    margin: 0;
}

.bg {
    overflow: scroll;
    background-image: url("https://via.placeholder.com/150");
    height: 100%;
    background-position: center;
    background-repeat: repeat-y;
    background-size: cover;
    background-attachment: fixed;
}

<body>
  <div class="bg flex-column d-flex">
    <header class="container"></header>
    <div class="container" flex-grow-1 flex-shrink-0>
      <main role="main" class="h-100">
         <ol>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
          <li>Some content</li>
         </ol>
      </main>
    </div>
  </div>
</body>

如何组合高度和最小高度以始终将 div 拉伸到底部并保持背景可见

How do I combine height and min-height to always stretch div to bottom and keep background visible

html

css

height

“修复”