Div containers 100 percent height not working

Question

I'm trying to have two DIVs be 100% height of their containing elements. But it always stays at 200px for some odd reason. The body element and the div #wrapper are set to 100% height, but are only 200px high.

Also, when I set HTML {height: 100%}, using Chrome's element inspector, the actual HTML element is set to 200px.

Mock up website: CodePen https://1cfa12692148c3352bc30134a5ae506804775e77.googledrive.com/host/0B_5GGeR4a3S6ODlydkNFQnZHbWM/index.html

Please include the relevant code within the question text -- enough for a [minimal example](https://stackoverflow.com/help/mcve) of the issue. Links are good for providing further detail, but shouldn't be the only reference. — Jonathan Lonowski, Apr 19 '15 at 04:53
@JonathanLonowski Done. I'm just trying to understand why the body element isn't showing as 100% width. It looks like it, but when you inspect element, it's 200px. — Eduardo06sp, Apr 19 '15 at 05:57
possible duplicate of [height:100%; not working](http://stackoverflow.com/questions/7049875/height100-not-working) — Chaitanya Gadkari, Apr 20 '15 at 06:45
@ChaitanyaGadkari I actually tried that and the HTML element actually sized down to 200px! — Eduardo06sp, Apr 21 '15 at 07:49

score 0 · Answer 1 · answered Apr 19 '15 at 06:25

0

Try with making body and wrapper position as absolute and set top and bottom size to 0.

position: absolute;
top: 0;
bottom: 0;
height:100%;

Hope it will do the job.

answered Apr 19 '15 at 06:25

Shahin Alam

73
14

fcastillo · Accepted Answer · 2015-04-20T06:24:52.137

0

This happens because you have a lot of float elements and position absolute. If you use a class like .clearfix some elements your height could be good. Codepen

.clearfix { 
  display: block;
  clear: both;
}
.clearfix:before,
.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

And I add this class to your #content

<div id="content" class="clearfix"> 
   ...
</div>
<div id="footer" class="clearfix"> 
   ...
</div>

edited Apr 20 '15 at 06:24

answered Apr 19 '15 at 08:16

fcastillo

938
1
11
24

This increased the height significantly but #wrapper height cuts short of the footer. – Eduardo06sp Apr 20 '15 at 04:46
Yes but only add .clearfix to your footer `
`
– fcastillo Apr 20 '15 at 06:24

Div containers 100 percent height not working

2 Answers2