3

TL:DR; Is it possible to set a child of min-height:100% to min-height:100%?

My #body-container is a full-width container while my .bg-container is just a 920px container.

As pen
As snippet

html,
body {
  height: 100%;
  background-color: black;
}

#body-container {
  min-height: 100%;
  background-color: red;
}

.bg-container {
  width: 920px;
  margin: 0 auto;
  background-color: blue;
  min-height: 100%;
}
<div id="body-container">
  
  <div class="bg-container">
    foo bar
  </div>
  
</div>
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
boop
  • 7,413
  • 13
  • 50
  • 94
  • Possible duplicate of [div with min-height and the child div have the height of parent](http://stackoverflow.com/questions/6503649/div-with-min-height-and-the-child-div-have-the-height-of-parent) – Schneyer Dec 04 '15 at 16:03

3 Answers3

4

Sure, just add height:100% and overflow:auto to the #body-container:

html,
body {
  height: 100%;
  background-color: black;
}
#body-container {
  height: 100%;
  min-height: 100%;
  overflow:auto;
  background-color: red;
}
.bg-container {
  width: 920px;
  margin: 0 auto;
  background-color: blue;
  min-height: 100%;
}
<div id="body-container">

  <div class="bg-container">
    foo bar
  </div>

</div>
j08691
  • 204,283
  • 31
  • 260
  • 272
  • 1
    Indeed. I forgot to add `overflow:auto`. Answer and snippet updated. http://codepen.io/anon/pen/zrYwbv?editors=110 – j08691 Dec 04 '15 at 16:08
  • The `overflow: auto` is crucial here – I was wondering why it did not work for me, but I did not have it set :/ Great answer, helped a lot! Thanks! – mdmb Dec 23 '19 at 14:06
2

The easiest work-around would be to use viewport percentage units. In this case, 100vh would work since the element is relative to the viewport anyways. You can always use calc() to displace the value if the element isn't positioned relative to the viewport.

In doing so, you don't need to set a height/min-height on any of the parent containers either:

html,
body {
  background-color: black;
}
#body-container {
  background-color: red;
}
.bg-container {
  width: 920px;
  margin: 0 auto;
  background-color: blue;
  min-height: 100vh;
}
<div id="body-container">
  <div class="bg-container">foo bar</div>
</div>
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • The only drawback I see to this solution is that `vh` isn't supported in some older browsers. – j08691 Dec 04 '15 at 16:18
  • @j08691 Support looks pretty good to me ;) http://caniuse.com/#feat=viewport-units I guess that's up to the OP... at least my answer doesn't add a scrollbar to the element.. like yours does. – Josh Crozier Dec 04 '15 at 16:20
2

As an alternative, Flexbox

Codepen Demo

html,
body {
  height: 100%;
  background-color: black;
  margin: 0;
}
#body-container {
  width: 920px;
  margin: 0 auto;
  min-height: 100%;
  background-color: red;
  display: flex;
  flex-direction: column;
}
.bg-container {
  background-color: blue;
  flex: 1;
}
<div id="body-container">

  <div class="bg-container">
  </div>

</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161