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

Question

I tried numerous suggestions but nothing worked so far. The context: I have a centered main section (white background) that stretches nicely to the bottom of the page, using flex. See this image:

Now, there's one section on the website that has lots of content. The issue is that scrolling brings a white background into view while the image should just remain fixed:

I've been able to fix it but that breaks the first view (see below). Here's the HTML and CSS so far (using Bootstrap also).

<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;
}

The "fix"

By changing the css to this:

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

the scrolling white background issue is fixed. However, now my other pages are broken because the div doesn't stretch to the page bottom anymore.:

Any help is appreciated.

@TemaniAfif just tried this, doesn't fix the pages with little content (last screenshot) — FDM, Feb 20 '21 at 20:35
Also, whoever voted to close, the referenced question didn't help in my case... but ok. :) — FDM, Feb 20 '21 at 20:40

score 1 · Accepted Answer · answered Feb 20 '21 at 20:34

Simply add overflow: scroll to the .bg div, so that all contents that overflow inside the div stay within the parent div's boundaries, with a scrollbar.

Demo

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>

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

The "fix"

1 Answers1