DIV and its child both not stretching to 100% height even with parents height set as 100%

Question

I have spent too much time trying solutions i found in similar topics, nothing worked, i must be missing something, i have a div container inside the body and another div navigation inside the container, now both container and its child navigation are not stretching to 100%.
Here's the link jsfiddle

HTML

<body>
     <div id="header"></div>

     <div id="container">

     <div class="navigation"></div>
        <div id="categ">
    <div class="titimmo" style="background-color:#CC3300;">
               <a href="#">Immobilier</a></div>
    <div class="cat-classes"><a href="#">Category</a></div>
    <div class="cat-classes"><a href="#">Category</a></div>
    <div class="cat-classes"><a href="#">Category</a></div>
     </div>
 
        <div id="categ">
    <div class="titauto" style="background-color:#00CC99;">
               <a href="#">Automobile</a></div>
    <div class="cat-classes"><a href="#">-Annonce</a></div>
     </div>
 
        <div id="categ">
    <div class="titvehicule" style="background-color:#0099FF;">
                 <a href="#">Véhicule</a></div>
    <div class="cat-classes"><a href="#">Category</a></div>
    <div class="cat-classes"><a href="#">Category</a></div>
     </div>
        <div id="categ">
    <div class="titinfo" style="background-color:#993300;">
                <a href="#">Informatique</a></div>
    <div class="cat-classes"><a href="#">Category</a></div>
    <div class="cat-classes"><a href="#">Category</a></div>
    <div class="cat-classes"><a href="#">Category</a></div>
     </div>
 
        <div id="categ">
    <div class="titspares" style="background-color:#9900FF;">
                <a href="#">Pièces détachees</a></div>
    <div class="cat-classes"><a href="#">Category</a></div>
    <div class="cat-classes"><a href="#">Category</a></div>
    <div class="cat-classes"><a href="#">Category</a></div>
    <div class="cat-classes"><a href="#">Category</a></div>
     </div>
           <div id="categ">
    <div class="titmaison" style="background-color:#6666FF;">
                <a href="#">Maison</a></div>
    <div class="cat-classes"><a href="#">Category</a></div>
    <div class="cat-classes"><a href="#">Category</a></div>
    <div class="cat-classes"><a href="#">Category</a></div>
    <div class="cat-classes"><a href="#">Category</a></div>
           </div>
           <div id="categ">
    <div class="titmateriaux" style="background-color:#330000;">
                <a href="#">Matériaux & Equipement</a></div>
    <div class="cat-classes"><a href="#">Category</a></div>
    <div class="cat-classes"><a href="#">Category</a></div>
    <div class="cat-classes"><a href="#">Category</a></div>
        </div>
           <div id="categ">
    <div class="titmode" style="background-color:#3366FF;">
               <a href="#">Accessoires de Mode</a></div>
    <div class="cat-classes"><a href="#">Category</a></div>
    <div class="cat-classes"><a href="#">Category</a></div>
    <div class="cat-classes"><a href="#">Category</a></div>
        </div>
 
 </div>
 
 <div id="footer">Copyright <?php echo date("Y");?>, *******.</div>

    </body>

CSS

html{ height: 101%; margin: 0; padding: 0; min-height:100%;}
body {
  height: 100%; 
  margin:0;
  padding:0;
  background-color:#0099CC;
  min-height:100%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #313131;
}

#header {
 height:15%;
 background-color:#FFFF00;
}

#container {
 height:100%;
 background-color:#00FF00; 
}

.navigation {
 margin-left:3%;
 margin-right:2%;
 width:25%; height:100%;
 background-color:#A8A8A8;
 float:left;
}

#footer {
 clear:both;
 width: 100%; padding-top:2%;
 background-color:#99CCFF; text-align:center;
 color:#080808;
 height: 5%;
    position:relative;
}


#categ {
 width:27%;
 background-color:#E8E8E8;
 float:left; 
 margin: 0 5% 3% 3%; 
}
.cat-classes a{
 color:#000000;
 text-decoration:none; display:block;
 font-weight:bold;
}
.titimmo, .titauto, .titvehicule, .titinfo, .titspares, .titelectronics, .titmaison, .titloisirs, .titphones, .titvet, .titphoneacces, .titservices, .titmateriaux, .titmode, .titcosmetique, .titvoyage, .titemploi, .titdivers {
 text-align:center;
 padding:1%;
 font-size:16pt;
}
.titimmo .titauto .titvehicule .titinfo .titspares .titelectronics .titmaison .titloisirs .titphones .titvet .titphoneacces .titservices .titmateriaux .titmode .titcosmetique .titvoyage .titemploi .titdivers, a{
 color:#FFFFFF; text-decoration:none; display:block;
 padding:3%;
 font-weight:bold;
}

Remove the `margin`s from your children and they will stretch. — tao, Mar 08 '16 at 21:07
100% of what do you want? The #container div is as high as the window, which is what the css says it is. — Mr Lister, Mar 08 '16 at 21:08
It's unclear what you are asking. Is [this](https://jsfiddle.net/websiter/LL0f20L6/3/) what you want? — tao, Mar 08 '16 at 21:10
It's because you didn't make your question clear. You are referring to `height` while everyone thought you are referring to `width`. Added the answer. — tao, Mar 08 '16 at 21:14
@Samwise I think this is a good link for you to read up on [Floats](http://stackoverflow.com/questions/16568272/why-doesnt-the-height-of-a-container-element-increase-if-it-contains-floated-el) — Kyle Dunne, Mar 08 '16 at 22:02
@Samwise I did something up, let me know if this is what you wanted: [Fix](http://jsfiddle.net/LL0f20L6/6/) — Kyle Dunne, Mar 08 '16 at 22:46
@Kyle Dunne, i don't know how to thank you, this is exactly what i wanted, Thank You Very Much Kyle. — Samwise, Mar 08 '16 at 23:55

score 0 · Answer 1 · answered Mar 08 '16 at 21:08

0

on your css remove the margin on the navigation.

.navigation {
    margin-left:3%;  --remove this
    margin-right:2%;  --remove this
    width:25%; height:100%;
    background-color:#A8A8A8;
    float:left;
}

is that what you are looking for? if not can you be more specific

answered Mar 08 '16 at 21:08

acardoso

68
5

I need the green and grey divs to stretch down, they are 100% height, but they are only half the page. i want the #container div and the #navigation div to reach the footer – Samwise Mar 08 '16 at 21:14

Samwise · Answer 2 · 2016-03-10T20:31:50.063

0

Here's a Fix by @Kyle Dunne, it works well, except for the Navigation div, for some reason its content sinks at the bottom of the div.
Thanks You @Kyle Dunne & @Andrei Gheorghiu.

UPDATE: Fixed Navigation div sinking content by removing float:left; from categ div and added second innerContainer2 div to hold category DIVs in two columns next to each other, Example.

edited Mar 10 '16 at 20:31

answered Mar 09 '16 at 19:35

Samwise

111
1
9

DIV and its child both not stretching to 100% height even with parents height set as 100%

2 Answers2