0

I have three divs of 100% height, I want to add a container around them where the height is automatic, so if I added another fourth div, the height of the container would expand. However, when I add height: auto to the container div, the three divs disappear. I also tried min-height: 100% as well but that didn't work. I can't find an answer that quite works for me and helps me understand the situation. Thanks in advance.

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

html>body .content {
    height: auto;
}

.container {
    height: auto;
}

.content {
    height: 100%;
    min-height: 100%;
}

#one {
    background-color: pink;
}

#two {
    background-color: lightblue;
}

#three {
    background-color: lightgreen;
}
<div class="container">
    <div class='content' id='one'></div>
    <div class='content' id='two'></div>
    <div class='content' id='three'></div>
</div>
Daut
  • 2,537
  • 1
  • 19
  • 32
Lucy S.
  • 185
  • 1
  • 2
  • 11
  • Your inner divs have no content! and the can't *all* be 100%. – Paulie_D Jan 11 '19 at 13:06
  • 1
    Add some content in inner div or set min-height in px. – Joykal Infotech Jan 11 '19 at 13:08
  • And auto means exactly that...nothing until the contents actually have a height defined by the *actual* content or a pixel value. – Paulie_D Jan 11 '19 at 13:08
  • A child with `height: 100%` only works if the parent has a set height (not auto). It's also a bit unclear what you want to achieve, but maybe you could replace `height: 100%` in your child divs with `height: 100vh` – elveti Jan 11 '19 at 13:56

0 Answers0