Percentage Height HTML 5/CSS

css height percentage
css height: 100
css height fit content
border height css
html height
css vh
fixed height css
relative; height css

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

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.

CSS height property, If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow. How the container will  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

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>

CSS: height property, , such as width , height , margin , padding , and font-size . Note: Only calculated values can be inherited. This element has a width of 100%. The height and width properties are used to set the height and width of an element. The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element. The height and width properties may have the following values:

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

<percentage>, November 19, 2013 at 5:58 am #156503 · intodesign body, html { width: 100%; height: 100%; } .div1 { background: blue; height:10vh; } .div2 { background: red;  How to set the height of a div to 100% using CSS. Topic: HTML / CSS Prev|Next Answer: Set the 100% height for parents too. If you will try the set the height of a div container to 100% of the browser window using the style rule height: 100%; it doesn't work, because the percentage (%) is a relative unit so the resulting height depends on the height of parent element's height.

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>

How to auto adjust the <div> height according to content in it , That's why using percentages is essential in responsive design. Popular grid systems and CSS frameworks use percentage values to create their  The height property sets the height of an element. The height of an element does not include padding, borders, or margins! If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly. If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within

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

CSS Height by percentage, The percentage CSS data type represents a percentage value. It is often used parent object. Numerous properties can use percentages, such as width, height, margin, padding, and font-size. The above HTML will output:. I'm looking to set a parent DIV as 70% of the full 100% screen height. I've set the following CSS but it doesn't seem to do anything: body { font-family: 'Noto Sans', sans-serif; margin: 0 auto; height: 100%; width: 100%; } .header { height: 70%; } For some reason it doesn't seem to be working though and the header isn't 70% of the screen size.

How to Use CSS to Set the Height of an HTML Element to 100%, This CSS tutorial explains how to use the CSS property called height with syntax and examples. The CSS height property defines the height of the content area of an element. Web Development; HTML · CSS · JavaScript · Color Picker When the value is provided as a percentage, it is relative to the height of the  Add a percentage value for padding-top to maintain the aspect ratio of the DIV. The following example will create an aspect ratio of 1:1 (the height and width is always equal): Example 1:1 Aspect Ratio. background-color: red; padding-top: 100%; /* 1:1 Aspect Ratio */ position: relative; /* If you want text inside of it */

height, 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. html, body { height:100% } #main { height:100% } footer { height:123px } For a fixed footer, I would suggest to use position:absolute or maybe position:fixed - it depends how you want it to behave (scroll with page or always stay at bottom).

How to Set a DIV Height to 100% Using CSS, If you will try the set the height of a div container to 100% of the browser window using the style rule height: 100%; it doesn't work, because the percentage (%) is​  The above HTML code display two tables, one is 100 pixel width and another one is 100% width.

Comments
  • Here's a simple and clear explanation of the CSS height property with percentage values: stackoverflow.com/a/31728799/3597276
  • addresses the DOCTYPE issue: stackoverflow.com/a/32215263/3597276
  • Although not working for portrait screen orientation stackoverflow.com/questions/23198237/…
  • 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.
  • ¬_¬ 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
  • 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
  • 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.
  • 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.
  • this works great. It also feels fast in the browser whilst resizing a page holding 100+ elements. thanks!