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>
6 answers
solution1
8 ACCPTED 2016-03-17 12:54:13
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/
solution2
1 2016-03-17 10:58:17
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
solution3
0 2016-03-17 10:58:08
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...
solution4
0 2016-03-17 11:01:58
try
html,body{ height:100%; margin:0; }
solution5
0 2016-03-17 11:03:37
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.
solution6
0 2016-03-17 11:13:51
try this it may work:
* {
margin: 0;
padding: 0;
}
html,
body {
min-height: 100%;
}
.container {
height: 100%;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.