By D. Strout


2009-10-25 20:50:25 8 Comments

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

6 comments

@Md. A. Barik 2018-11-29 05:57:05

Hi! In order to use percentage(%), you must define the % of it parent element. If you use body{height: 100%} it will not work because it parent have no percentage in height. In that case in order to work that body height you must add this in html{height:100%}

In other case to get rid of that defining parent percentage you can use

body{height:100vh}

vh stands for viewport height

I think it help

@Jahmic 2018-11-22 11:27:26

Sometimes, you may want to conditionally set the height of a div, such as when the entire content is less than the height of the screen. Setting all parent elements to 100% will cut off content when it is longer than the screen size.

So, the way to get around this is to set the min-height:

Continue to let the parent elements automatically adjust their height Then in your main div, subtract the pixel sizes of the header and footer div from 100vh (viewport units). In css, something like:

min-height: calc(100vh - 246px);

100vh is full length of the screen, minus the surrounding divs. By setting min-height and not height, content longer than screen will continue to flow, instead of getting cut off.

@Brian Campbell 2009-10-25 21:15:03

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>

@omninonsense 2011-12-30 14:41:53

¬_¬ 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

@codefreaK 2015-09-04 19:04:03

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

@MG Developer 2017-04-30 16:10:43

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.

@Ahmad Aghazadeh 2016-10-26 06:58:16

You can use 100vw / 100vh. CSS3 gives us viewport-relative units. 100vw means 100% of the viewport width. 100vh; 100% of the height.

    <div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
        <div style="width:70%; height: 100%; border: 2px dashed red"></div>
        <div style="width:30%; height: 100%; border: 2px dashed red"></div>
    </div>

@bobince 2009-10-25 21:17:03

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.

@Dchris 2014-04-21 13:18:14

Although not working for portrait screen orientation stackoverflow.com/questions/23198237/…

@MG Developer 2017-04-30 16:12:06

Please see the answer by Brian Campbell below I believe that is the correct solution. This answer seems to be a workaround and does not address the actual issue.

@Olex Ponomarenko 2013-06-17 22:46:05

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), the best way to do that is by effectively setting 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

@dean grande 2018-04-26 12:16:45

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

Related Questions

Sponsored Content

44 Answered Questions

[SOLVED] How can I transition height: 0; to height: auto; using CSS?

19 Answered Questions

[SOLVED] Is it possible to apply CSS to half of a character?

31 Answered Questions

[SOLVED] Is there a CSS parent selector?

  • 2009-06-18 19:59:36
  • jcuenod
  • 1744656 View
  • 2895 Score
  • 31 Answer
  • Tags:   css css-selectors

9 Answered Questions

[SOLVED] Why does HTML think “chucknorris” is a color?

31 Answered Questions

[SOLVED] Make a div fill the height of the remaining screen space

  • 2008-09-18 05:06:17
  • Vincent McNabb
  • 861499 View
  • 1653 Score
  • 31 Answer
  • Tags:   html css html-table

34 Answered Questions

[SOLVED] Change an HTML5 input's placeholder color with CSS

31 Answered Questions

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

  • 2009-10-15 21:18:43
  • mike
  • 1792576 View
  • 1951 Score
  • 31 Answer
  • Tags:   html css height

30 Answered Questions

[SOLVED] Convert HTML + CSS to PDF with PHP?

22 Answered Questions

[SOLVED] Make body have 100% of the browser height

  • 2011-07-11 18:50:56
  • bodyofheat
  • 789960 View
  • 744 Score
  • 22 Answer
  • Tags:   html css height

26 Answered Questions

[SOLVED] Set cellpadding and cellspacing in CSS?

Sponsored Content