setting height 100% not working

Question

For some reason the container's boundaries won't go all the way to the bottom despite making its height 100%. Here is my code, the container is under another div center.

Html

<div id="center">
<div class="container" >
 </div>
 </div>

css

#center {   
  float:left;
  width:20%;
  margin-top:10px;
  height:100%;
}

.container {
  margin-top:3px;   
  height:100%;  
  border:2px solid #dedede; 
  width:600px;
}

@random bottom of the browser window – katie Jul 29 '11 at 21:15 — katie, Jul 29 '11 at 21:15

Sparky · Accepted Answer · 2011-07-29T22:14:06.563

12

You'll have to include something like this in your CSS...

body, html{
   height: 98%;
   padding: 0;
}

Play around with the height to eliminate the vertical scroll-bars caused by margins and borders on the elements contained within.

http://jsfiddle.net/4JgA4/1/

EDIT:

Otherwise, make it 100% and reduce the height of the main element inside to eliminate vertical scroll-bars.

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

#center {  
 float:left;
 width:20%;
 margin-top:10px;
 height:90%;
}

.container {
  margin-top:3px;   
  height:100%;  
  border:2px solid #dedede; 
  width:600px;
}

http://jsfiddle.net/4JgA4/3/

edited Jul 29 '11 at 22:14

answered Jul 29 '11 at 22:00

Sparky

98,165
25
199
285

1

Instead of playing around with percentages you can also set the box-sizing to border-box: `box-sizing: border-box;` That's the first thing I do when I start a new project. – Noah Krasser May 06 '17 at 19:04

score 2 · Answer 2 · answered Jul 29 '11 at 21:15

2

Your id='center' div needs to be inside something with height.

This helps me - whenever I set a style to width or height=100% I ask myself, "100% of WHAT?" that prompts me to make sure whatever the element is inside of is also styled properly for width and height.

Also, put different colored borders around things to see where and how big they really are. It can screw up dimensions but it gives you a good idea of what is really going on.

answered Jul 29 '11 at 21:15

n8wrl

19,439
4
63
103

2

`outline` can be used in place of `border` for quick debugging (although arguably Firebug works just as well while leaving less residue to remove). The advantage of `outline` is that it does not (err, *should not*) affect the flow. – Jul 29 '11 at 21:20
@n8wrl you mean the center div should have an absolute height like set it in pixels? – katie Jul 29 '11 at 21:23

score 2 · Answer 3 · answered Jul 29 '11 at 21:19

2

For a working 100% height property you need to have the parent div's height set.

In your case the element which is the parent of #center should have some height for your css to work as expected.

answered Jul 29 '11 at 21:19

Sinan

11,443
7
37
48

Jonathan Henson · Answer 4 · 2011-07-29T21:48:06.170

Usually, a div is only as high as its content regardless of the height you specify. You need to nest them. To avoid complication, I set a max-height and use absolute positioning for the elements I want to be at the bottom of the container.

As a design approach, you need to make sure the content of the div is the height you want. Padding can be a very useful tool. You can put ridiculous padding in and hide the overflow. Then it will cap off at your max-height.

setting height 100% not working

4 Answers4

Linked