Categories
css height html

Percentage Height HTML 5/CSS

211

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;
}

3

413

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.

3

77

You need to set the height on the <html> and <body> elements as well; otherwise, they will only be large enough to fit the content. For example:

<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>

4

  • 8

    ¬_¬ It took me 20 minutes to figure out I had to set the height of the document to 100%, too. I read this a bit too late, but it’s very brilliant, still. sigh

    Dec 30, 2011 at 14:41

  • This should be voted up as answer as it gives a solution to lot of people coming here wondering what can be done most watch the first answer and think its not possible and wander off thinking of whether any other method exists without reading this

    – codefreaK

    Sep 4, 2015 at 19:04

  • I agree this is the correct answer, the height does not work because parent element that is body and html needs to be set. This answer should be the accepted answer.

    Apr 30, 2017 at 16:10


  • 1

    This is not a correct answer – if the content is larger than will fit the height of the screen then the rest of the content is no longer visible anyway, thus the height has NOT been set to 100% of browser window but again to 100% of content. That’s maybe not logical, but that is what does happen in the two main browsers, Firefox and Chrome – just try it out. Thus the accepted answer is the only correct one.

    – nepdev

    Dec 21, 2019 at 15:52


17

bobince’s answer will let you know in which cases “height: XX%;” will or won’t work.

If you want to create an element with a set ratio (height: % of it’s own width), use the aspect-ratio property. Make sure height is not explicitly set on the element for it to work. https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

.square {
  width: 100%;
  height: unset;
  aspect-ratio: 1 / 1;
}

Historically, the best way to do this was to set the height using padding-bottom. Example for square:

<div class="square-container">
  <div class="square-content">
    <!-- put your content in here -->
  </div>
</div>

.square-container {  /* any display: block; element */
  position: relative;
  height: 0;
  padding-bottom: 100%; /* of parent width */
}
.square-content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

The square container will just be made of padding, and the content will expand to fill the container. Long article from 2009 on this subject: http://alistapart.com/article/creating-intrinsic-ratios-for-video

1

  • this works great. It also feels fast in the browser whilst resizing a page holding 100+ elements. thanks!

    Apr 26, 2018 at 12:16