Why Is 100% Height Not 100% of the Browser Height

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

Why is 100% height not 100% of the browser height?

The short answer: It's complicated. To really understand all the factors that affect CSS 100% heights (and widths) you'll need to know about terms such as: the view port, initial containing block, flow, overflow, inline formatting contexts, block formatting contexts, the W3C box model, the IE box model and Quirks Mode.

If you're really interested on getting on top of it there is no better place to start than the spec: The Visual Formatting Model

But here's an overview.

Heights on inline elements are calculated differently than block elements -- so from here on this only refers to block elements or elements which have been given new block formatting contexts.

To start with when you give an element 100% height, it will take it's height from it's containing block eg. it's parent and it's parent takes it's height from it's parent and so-forth back to the initial containing block.

The initial containing block is different in HTML (body) and XML/XHTML (html) and it's default height isn't 100% of the viewport so normally you would cover your butt and define it this way:

html, body {
   margin:0;
   padding:0;
   height:100%;
}

We had to zero the margin and padding because in CSS the Height property refers to the height of the Content Box and if there was any margin or padding (or border) we'd get a scrollbar. The height would be 100% + padding + border + margin... W3C Box Model

The exception to this is if IE is in Quirks Mode... IE box model

...so unless you maintain this "100% height" through all descendant elements then you are redefining the meaning of "100% height" to each new descendant. This can also be affected by the creation of a new Block Formatting Context. You create new bock formatting contexts when you Float or Absolutely Position an element (as well as some other things)

About the height of Table cells...

People often ask "Why won't my Div with 100% height work in a table cell?".

This has to do with how a Table cell's height is calculated. When a cell is rendered the height of it's content box isn't stretched to match the height of the parent Row. The renderer instead adds extra padding as required so that the overall height matches the height of the Row. So in this example...

<tr>
   <td>
      line one<br>
      line two<br>
      line three
   </td>
   <td>
      <div style="height:100%">
         Hello world!
      </div>
   </td>
</tr>

...the height of the Div is 100% -- 100% of the cell's Content Box. The cell's content box was given extra padding so that it matched the overall height of the row. The Div's height is 100% of it's parents content box (not the overall height).

See Table height algorithms.

As this question seems to be asked almost daily I've check the Wiki check box -- I'm a newbie but presumable this will make it easier for others to make corrections and additions as needed.

Body not 100% height but 100% Viewport

If you want to make sure your height is at least 100% but then it grows with content, then instead of using height: 100% you should use min-height: 100%.

However, on your example, you may wonder why even if there's no enough content you still get a vertical scroll bar. That's because the h1's margin-top is displacing the parent and making your body not start at the very top but rather at 0.67em (which is the h1's top margin on, for example, Google Chrome's User Agent by default).

There are many ways to solve this. You can:

add a padding-top: 1px to the .header. If you want to be pixel perfect you can also add margin-top: -1px.
add overflow: auto to the .header.
remove the margin-top of the h1 if you don't need it

Here's an implementation that uses min-height: 100% on body and also uses overflow: auto on the .header.
See how the body takes at least 100% of the height of the viewport, or its content's height if it's bigger than 100%. https://jsfiddle.net/nprq5LLo/7/

Why does 100% not mean 100% height?

The issue is covered in the CSS 2.1 spec:

<percentage>

Specifies a percentage height. The percentage is
calculated with respect to the height of the generated box's
containing block. If the height of the containing block is not
specified explicitly (i.e., it depends on content height), and this
element is not absolutely positioned, the value computes to 'auto'. A
percentage height on the root element is relative to the initial
containing block. Note: For absolutely positioned elements whose
containing block is based on a block-level element, the percentage is
calculated with respect to the height of the padding box of that
element. This is a change from CSS1, where the percentage was always
calculated with respect to the content box of the parent element.

So, to clarify, a percentage height will reference the height of its containing block (unless it is position: absolute or position: fixed). If that containing block does not have a specified height, then the percentage will refer to auto, and it won't really do much.

position: absolute changes the referenced containing block to the nearest positioned (absolute, relative, or fixed) element.

position: fixed changes the referenced containing block to the viewport.

So, if you specify a height on your containing block, specify a position other than static on your containing block, or don't mind using the viewport as your containing block, then you can use percentage heights effectively.

Please see my demonstration at jsFiddle

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.

body height not filling 100% page height

Looks like you have float:left applied on your children. Use this code :

html, body {
    overflow: auto;
}

Why is the box not 100% height?

This is what you're looking for:

You need to add 100% height to body and html. Your mistake was to add 100% to * which applies to every element (including your paragraphs)

* {

  padding: 0;

  margin: 0;

}

html {

  height: 100%;

}

body {

  height: 100%;

}

.box {

  height: 100%;

  background-color: brown;

}

<!DOCTYPE html>

<html>

<head>

  <style>

  </style>

</head>

<body>

<div class="box">

    <p>This is a paragraph.</p>

    <p>This is a paragraph.</p>

</div>

</body>

</html>