How can I make a div's height 100%

Question

I have a div containing a sidebar. I would like the sidebar's height to be 100% (of the parent div). For now it is only high as the content it has.

#parent {
    height: 100%;
}    
#sidebar {
    height: 100%;
}

You will have to show the relevant HTML and CSS so we can see how the layout works in order to answer. Ideally, you'd put a simple example in a jsFiddle. — jfriend00, Aug 18 '12 at 22:08
eq by jquery $('#parent,#sidebar').css('min-height', $(window).height() ); + bind or resize — user956584, Aug 18 '12 at 22:17
have a look at this http://stackoverflow.com/questions/11694856/extend-a-div-the-length-of-its-container/11705728#11705728 — Pevara, Aug 18 '12 at 22:20
100% height only works inside an element whose height is already known. — Neil, Aug 18 '12 at 22:38

yckart · Answer 1 · 2012-08-18T22:25:20.170

0

There are many possibilities to realise this.

The easiest way is to set the height of <html> and <body> to 100%.

HTML

<div id=parent>
    <div id=sidebar></div>
</div>

CSS

html,body{height:100%}
#parent {
    height: 100%;
    background: #222 /* not needed */
}    
#sidebar {
    width: 200px; /* not needed */
    height: 100%;
    background: #444 /* not needed */
}

DEMO

EDIT

overflow:auto fixes the problem too height content:

DEMO

edited Aug 18 '12 at 22:25

answered Aug 18 '12 at 22:12

yckart

32,460
9
122
129

this causes problems when the content becvomes bigger then 100%. http://jsfiddle.net/5tazc/1/ – Pevara Aug 18 '12 at 22:17
If you look at http://gablabelle.com you will see the sidebar is still not 100% maybe I'm missing something. – Gab Aug 18 '12 at 22:20
Okay! I Accept... I think it's the best way to delete the height properties for your sidebar and content! – yckart Aug 19 '12 at 00:06

score 0 · Answer 2 · answered Aug 18 '12 at 22:17

0

Sorry 100% only apply to width does not apply to height you can try a jquery approach instead

html_height = $("#parent").height();
$('#sidebar').height(html_height);

with this unless you have a padding/margin on the side bar the height should be okay

answered Aug 18 '12 at 22:17

omoabobade

515
5
16

score 0 · Accepted Answer · answered Aug 18 '12 at 22:55

When you set the height to 100%, it's 100% of what? The parent might be set to 100% but what quantity is that? While html is set to the height of the viewport, your parent div must be set to something with a set height in real numbers, or inherit it from its parent.

How can I make a div's height 100%

3 Answers3