Setting html, body with min-height: 100% but also allow it to expand

Question

So I was wondering if it was possible to have the html/body be at a minimum 100% height using css (somehow) and have it expand as needed? Right now I have a flexbox where the body takes up the remaining space (as expected).

On a live website, the body may not take up the entire page, so I want the flexbox to fill it up and to have the footer be stuck at the bottom, but when displayed on smaller screens (i.e. mobile) it will most likely fill past the visible screen. At this point (or if the body ends up filling the screen anyway), I'd like the footer to continue down on its merry way.

Without drawing borders onto the flexbox container, it seems to work as intended. But for speculative reasons, where the bordering/size of the container may be important, is it possible to have it be draw correctly (ignoring the fact that the overflow is just showing seems like a hacky job).

I will also accept javascript answers for now, but CSS will be most optimal

html, body {
  height: 100%;
}

.wrapper {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  height: 100%;
}

.body {
  flex: 1;
  min-height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <header style="background-color: lightblue">
    header
  </header>
  <div class="body" style="background-color: orange; opacity: 0.3">
    body
  </div>
  <footer style="background-color: yellow">
    footer
  </footer>
</div>

@Toxide82 I tried to `height: auto !important` but it seemed to just ignore it :\ — A. L, Mar 06 '17 at 09:37
if the footer is always to show at the bottom on larger screens why not set `position: absolute;` and see if you can set it to `relative` on the smaller screens. see if that makes any difference. — Toxide82, Mar 06 '17 at 09:41
Am I misunderstanding the question? What is wrong with your current code? — Pete, Mar 06 '17 at 09:48
@Pete If you look at the output in a smaller screen, you will see the border not quite making it around all the inner elements, because the height of the `html` and `body` are fixed at 100% of whatever window size you are atm. It kind of goes halfway then stops (it wraps around there, but is hidden beneath the background-colors — A. L, Mar 06 '17 at 10:07
@Toxide82 but in the event that I want to add something that uses `toggle` from jquery, absolute is going to just overlap the body, which I may not want. — A. L, Mar 06 '17 at 10:11

score 1 · Answer 1 · edited May 23 '17 at 11:46

You can make it work with standard percentage heights. But that's a bit tricky and, frankly, unnecessary. Just use viewport percentage units.

Here's a simplified version of your code:

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  border: 1px solid black;
}

.body {
  flex: 1 0 300px;
}

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

<div class="wrapper">
  <header style="background-color: lightblue">header</header>
  <div class="body" style="background-color: orange; opacity: 0.3;">body</div>
  <footer style="background-color: yellow">footer</footer>
</div>

Pete · Accepted Answer · 2017-03-06T10:31:56.957

Just use min-height instead of height on your wrapper:

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

.wrapper {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  min-height: 100%;
  box-sizing: border-box;
}

.body {
  flex: 1;
  min-height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <header style="background-color: lightblue">
    header
  </header>
  <div class="body" style="background-color: orange; opacity: 0.3">
    body
  </div>
  <footer style="background-color: yellow">
    footer
  </footer>
</div>

well that was simpler than expected – A. L Mar 06 '17 at 12:25 — A. L, Mar 06 '17 at 12:25

score 0 · Answer 3 · edited Jul 09 '20 at 13:34

If I got this question right, maybe this will help:

<!DOCTYPE html>
<html>
  <head>
    <title>Fluid height content</title>
  </head>
  <body>
    <style>
    html { 
      height: 100%; 
    }
            
    body { 
      min-height: 100%;
    }
            
    .flex-container { 
      min-height: 100vh; 
    }
    </style>

    <div class="flex-container">
      Some content
    </div>
  </body>
</html>

Setting html, body with min-height: 100% but also allow it to expand

3 Answers3