CSS 100 Percent Height Body and Element

Make body have 100% of the browser height

Try setting the height of the html element to 100% as well.

html, 
body {
    height: 100%;
}

Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well.

However the content of body will probably need to change dynamically.
Setting min-height to 100% will accomplish this goal.

html {
  height: 100%;
}
body {
  min-height: 100%;
}

height: 100% or min-height: 100% for html and body elements?

If you're trying to apply background images to html and body that fill up the entire browser window, neither. Use this instead:

html {
   height: 100%;
}

body {
   min-height: 100%;
}

My reasoning is given here (where I explain holistically how to apply backgrounds in this manner):

Incidentally, the reason why you have to specify height and min-height to html and body respectively is because neither element has any intrinsic height. Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content.

The first way, using height: 100% on both, prevents body from expanding with its contents once they start to grow beyond the viewport height. Technically this doesn't prevent the content from scrolling, but it does cause body to leave a gap beneath the fold, which is usually undesirable.

The second way, using min-height: 100% on both, doesn't cause body to expand to the full height of html because min-height with a percentage doesn't work on body unless html has an explicit height.

For the sake of completeness, section 10 of CSS2.1 contains all the details, but it's an extremely convoluted read so you can skip it if you're not interested in anything beyond what I've explained here.

Why doesn't height: 100% work to expand divs to the screen height?

In order for a percentage value to work for height, the parent's height must be determined. The only exception is the root element <html>, which can be a percentage height. .

So, you've given all of your elements height, except for the <html>, so what you should do is add this:

html {
    height: 100%;
}

And your code should work fine.

* { padding: 0; margin: 0; }html, body, #fullheight {    min-height: 100% !important;    height: 100%;}#fullheight {    width: 250px;    background: blue;}

<div id=fullheight>  Lorem Ipsum        </div>

html and body not respecting 100% height

You have this in your code:

html, body {
    height: 100%;
}

That essentially limits the primary containers to 100% height of the viewport.

Because of the way percentage heights work, it's a bit messy and complicated to get them to work with min-height.

Instead of percentage heights consider viewport percentages. Remove the code above and add this:

body {
    min-height: 100vh;
}

revised fiddle

From the spec:

5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units

The viewport-percentage lengths are relative to the size of the
initial containing block. When the height or width of the initial
containing block is changed, they are scaled accordingly.

vw unit - Equal to 1% of the width of the initial containing block.

vh unit - Equal to 1% of the height of the initial containing
block.

vmin unit - Equal to the smaller of vw or vh.

vmax unit - Equal to the larger of vw or vh.

HTML, Body height 100% does not work

What seems to me, the directive ng-view is the parent of your application and header, content, footer are loaded in this div. So you have your header div at correct place, your footer is also placed correctly as it is absolutely positioned.

But in case of your content area, that is relative to the ng-view div.

I would recommend you to make it 100% height. Something like:

div[ng-view]{
     height: 100%;
}

Styling HTML and BODY selector to height: 100%; vs using 100vh

height: 100vh = 100% of the viewport height

height: 100% = 100% of the parent's element height

That is why you need to add height: 100% on html and body, as they don't have a size by default

Something you have to know : if you use % for vertical margin or padding, % will be calculated on the width of the parent element, not the height.

Tip : try using vh and vw units for font size :) I like this one (not supported in some browsers I know) : font-size: calc(.5vh + .5vw); (for example)

See a nice page here for CSS units : http://css-tricks.com/the-lengths-of-css/

CSS height 100% makes element height more than 100%

The reason you're getting the vertical scrollbar is because you're telling the div parent of col1 and col2 to be height: 100%. This by itself gives it the full height of the viewport.

From your code:

<div id='newdiv' style="display:flex; flex-direction:row; height:100%">
    <div style="background:#ffd0d0"> Col 1 </div>
    <div> Col 2 </div>
</div>

Except this div has a sibling: the header div, which is also taking up space.

So when the browser does it's height calculation, here is the result:

100% + (computed height of header div) > viewport height = vertical scrollbar

Instead of using defined heights, consider letting flexbox do the work. By default, flex items expand the full length of the container along the cross-axis.

So by simply declaring display: flex, child elements will expand to fill all available space (with no vertical scroll). But since a height rule will override this flex setting, we need to remove height: 100% from any flex items.

html, body { height: 100%; }

<body style="margin:0">    <div style="height:100%;display:flex;flex-direction:column">        <div style="background:#d0d0ff">            This is a header        </div>        <div style="background:#d0ffd0;flex-grow:1; display: flex;"><!--adjustment here-->            <div id='newdiv' style="display:flex;"><!--adjustment here-->                <div style="background:#ffd0d0; display: flex;"> Col 1 </div>                <div> Col 2 </div>            </div>        </div>    </div></body>