Container is not the same height as the child elements

Question

The container is only about 3/4 of the screens height, which is not the same height as the child elements.

Why is that?

I tried to give the container and body a min-height: 100% but this doesn't work. Even with !important

I don't use bootstrap, just plain html and css.

Any help much appreciated!

EDIT: Changing the Body or html height doesn't work. This breaks the page.

I have a body with the following CSS:

body {
  background-image: url("../img/1.png");
  background-repeat: repeat;
  background-size: cover;
  font-family: "Raleway", sans-serif;
  font-size: 20px;
  font-weight: 300;

}

The container has this CSS rules:

.container {
  width: 900px !important;
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
  background-color: rgba(255, 255, 255, 0.3);
  height: 100% !important;
}

My markup looks like this:

  <body>
    <div class="container">
      <div class="header">
        <div class="lang">
          <ul class="languages">
            <li>DE</li>
            <li>FR</li>
          </ul>
        </div>
        <img src="img/header/royalpool.png" alt="" class="logo-royal"/>
        <img src="img/header/bluetech.png" alt="" class="logo-bluetech"/>
        <div class="lang">
          <ul class="languages">
            <li>Kontakt</li>
            <li>Downloads</li>
            <li>Händler</li>
          </ul>
        </div>
        <ul class="navi">
          <li>
            <div class="box-q-1"><img src="img/header/i/pool.png" alt="" class=header-img/>
              <p>Pool</p>
            </div>
          </li>
          <li>
            <div class="box-q-1"><img src="img/header/i/filter.png" alt="" class=header-img/>
              <p>Filteration</p>
            </div>
          </li>
          <li>
            <div class="box-q-1"><img src="img/header/i/des.png" alt="" class=header-img/>
              <p>Desinfection</p>
            </div>
          </li>
          <li>
            <div class="box-q-1"><img src="img/header/i/cover.png" alt="" class=header-img/>
              <p>Cover</p>
            </div>
          </li>
          <li>
            <div class="box-q-1"><img src="img/header/i/solar.png" alt="" class=header-img/>
              <p>Solar</p>
            </div>
          </li>
          <li>
            <div class="box-q-1"><img src="img/header/i/pumpe.png" alt="" class=header-img/>
              <p>Wärme-Pumpe</p>
            </div>
          </li>
          <li>
            <div class="box-q-1"><img src="img/header/i/led.png" alt="" class=header-img/>
              <p>LED</p>
            </div>
          </li>
          <li>
            <div class="box-q-1"><img src="img/header/i/clean.png" alt="" class=header-img/>
              <p>Clean</p>
            </div>
          </li>
          <li>
            <div class="box-q-1"><img src="img/header/i/terasse.png" alt="" class=header-img/>
              <p>Terasse</p>
            </div>
          </li>
        </ul>
        <div style="clear:both"></div>
      </div>
      <div class="box-title">
        <p>Element-Betonbecken Premium</p>
      </div>
      <img src="img/page1/pool-top.png" class="pool-img" alt=""/>
      <div class="box-small-title-right">
        <p>Elementtreppen</p>
      </div>
      <div class="box-elementtreppen">
        <div class="treppe">
          <img src="img/page1/eck.png" alt="Eck" class="treppen-img"/>
          <p>Ecktreppe</p>
        </div>
        <div class="treppe">
          <img src="img/page1/eck.png" alt="Eck" class="treppen-img"/>
          <p>Innen Treppe</p>
        </div>
        <div class="treppe">
          <img src="img/page1/ganz.png" alt="Eck" class="treppen-img"/>
          <p>Ganze Treppe</p>
        </div>
        <div class="treppe">
          <img src="img/page1/rom.png" alt="Eck" class="treppen-img"/>
          <p>Römische Treppe</p>
        </div>
        <div class="treppe">
          <img src="img/page1/gerade.png" alt="Eck" class="treppen-img"/>
          <p>Gerade Treppe</p>
        </div>
      </div>
      <div class="box-small-title-left">
        <p>Varianten Wasserstand</p>
      </div>
      <img src="img/page1/normal.png" alt="" class="img-wasserstand first"/>
      <div class="box-small-title-right">
        <p>Bauphasen</p>
      </div>
      <div class="box-bauphasen"></div>

    </div>
  </body>

Try setting height 100% for the html and body http://stackoverflow.com/a/8464208/145122 — Ives.me, Mar 17 '16 at 10:56
my header is broken with this and the container just goes a little bit further, but not to the bottom. — olivier, Mar 17 '16 at 10:58
Possible duplicate of [how do I set height of container DIV to 100% of window height?](http://stackoverflow.com/questions/8473162/how-do-i-set-height-of-container-div-to-100-of-window-height) — Roman, Mar 17 '16 at 11:01
add a new line to the `.container` class called `position` with the value `relative` — node_modules, Mar 17 '16 at 11:16
no, doesn't work... If somebody find it useful here is the code: http://patrickhofer.ch/blue — olivier, Mar 17 '16 at 11:18
Try this: remove all background properties in `body{}` and a new like like this: `background: url(../img/1.png) center/cover no-repeat fixed` then add above `body{}` the following rule: `html { min-height: 100%; position: relative; }` I hope this will work for you. — node_modules, Mar 17 '16 at 11:28
Thank you @C0dekid but this also doesn't work... I guess i have to start at point zero... Could the header be the reason? — olivier, Mar 17 '16 at 12:39

mikedidthis · Accepted Answer · 2016-03-17T13:41:47.300

8

The body contains elements that are floated, they need clearing:

.container::before, .container::after {
    content: '';
    display: table;
}
.container::after {
    clear: both;
}

More about understanding floats here: https://css-tricks.com/all-about-floats/

edited Mar 17 '16 at 13:41

answered Mar 17 '16 at 12:54

mikedidthis

4,899
3
28
43

And how is this related to the question? – Vi100 Mar 18 '16 at 08:53
@Vi100 TBH the question was badly worded. The OP wanted the container to be the height of the child elements, which is was not due to _floated_ elements. – mikedidthis Mar 18 '16 at 10:07

score 1 · Answer 2 · edited May 23 '17 at 12:31

1

You need to add a height 100% on your body & HTML to make it work.

html, body {
    height:100%;
}

You can find more details about this on this same question

edited May 23 '17 at 12:31

Community

1
1

answered Mar 17 '16 at 10:58

Mamboleoo

459
2
6

This should work, at least if you don't have absolute/fixed positioning. – Marcos Pérez Gude Mar 17 '16 at 11:00
hmm, i guess i have a messy html code then. I don't use absolute/fixed – olivier Mar 17 '16 at 11:02
Is there a live demo somewhere ? We may help you if we knew the whole CSS code :) – Mamboleoo Mar 17 '16 at 11:12

Vi100 · Answer 3 · 2016-03-17T11:09:14.150

0

If you don't have to support old browsers (IE8 or before) you can achieve what you want setting the height with viewport units:

.container {
   height: 100vh;
}

Check the compatibility here: http://caniuse.com/#search=vh

NOTE: If you have any concerns about this you'll have to look for the compatibility of the background-size:cover rule also...

edited Mar 17 '16 at 11:09

answered Mar 17 '16 at 10:58

Vi100

4,080
1
27
42

score 0 · Answer 4 · answered Mar 17 '16 at 11:01

0

try

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

answered Mar 17 '16 at 11:01

George Soteriou

33
6

score 0 · Answer 5 · answered Mar 17 '16 at 11:03

0

You should reset margin and padding as well on html and body.

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

Hopefully that'll do it.

answered Mar 17 '16 at 11:03

qbeauperin

591
4
21

Raja O · Answer 6 · 2016-03-17T11:16:05.903

0

try this it may work:

 * {
      margin: 0;
      padding: 0;
    }
    html, 
    body {
      min-height: 100%;
    }
.container {
      height: 100%;
    }

edited Mar 17 '16 at 11:16

answered Mar 17 '16 at 11:13

Raja O

634
1
12
33

Container is not the same height as the child elements

6 Answers6