如何结合高度和最小高度始终将 div 拉伸到底部并保持背景可见[重复]答案

【问题标题】：How do I combine height and min-height to always stretch div to bottom and keep background visible [duplicate]如何结合高度和最小高度始终将 div 拉伸到底部并保持背景可见[重复]
【发布时间】：2021-02-21 04:34:48
【问题描述】：

我尝试了很多建议，但到目前为止都没有奏效。上下文：我有一个居中的主要部分（白色背景），使用 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 不再延伸到页面底部。：

感谢任何帮助。

【问题讨论】：

min-height:100vh 到 .bg 并删除 body,html 的所有内容
@TemaniAfif 刚试过这个，没有修复内容少的页面（最后截图）
您注意到“vh”了吗？
@TemaniAfif 是的，谢谢
另外，无论谁投票结束，引用的问题对我来说都没有帮助......但没关系。 :)

标签： html css height

【解决方案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>

【讨论】：