Percentage Height HTML 5/CSS

html css height
D. Strout picture D. Strout · Oct 25, 2009 · Viewed 231.3k times · Source

I am trying to set a <div> to a certain percentage height in CSS, but it just remains the same size as the content inside it. When I remove the HTML 5 <!DOCTYTPE html> however, it works, the <div> taking up the whole page as desired. I want the page to validate, so what should I do?

I have this CSS on the <div>, which has an ID of page:

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}

Answer

bobince picture bobince · Oct 25, 2009

I am trying to set a div to a certain percentage height in CSS

Percentage of what?

To set a percentage height, its parent element(*) must have an explicit height. This is fairly self-evident, in that if you leave height as auto, the block will take the height of its content... but if the content itself has a height expressed in terms of percentage of the parent you've made yourself a little Catch 22. The browser gives up and just uses the content height.

So the parent of the div must have an explicit height property. Whilst that height can also be a percentage if you want, that just moves the problem up to the next level.

If you want to make the div height a percentage of the viewport height, every ancestor of the div, including <html> and <body>, have to have height: 100%, so there is a chain of explicit percentage heights down to the div.

(*: or, if the div is positioned, the ‘containing block’, which is the nearest ancestor to also be positioned.)

Alternatively, all modern browsers and IE>=9 support new CSS units relative to viewport height (vh) and viewport width (vw):

div {
    height:100vh; 
}

See here for more info.

Related questions

How to make a div 100% height of the browser window

I have a layout with two columns - a left div and a right div. The right div has a grey background-color, and I need it to expand vertically depending on the height of the user's browser window. Right now …

Read More
Make body have 100% of the browser height

I want to make body have 100% of the browser height. Can I do that using CSS? I tried setting height: 100%, but it doesn't work. I want to set a background color for a page to fill the entire browser window, …

Read More
How to get div height to auto-adjust to background size?

How do I get a div to automatically adjust to the size of the background I set for it without setting a specific height (or min-height) for it?

Read More