Home/ Questions/Q 408889
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T17:44:09+00:00

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

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0