width:100%はよく使いますが、height:100%はあまり使いませんね。というか使えない場面がほとんどなんですが、じゃあ使うにはどうするか、というお話です。

サンプル

まずは実際に指定してみたものをご覧ください。

親要素に設定があれば指定できる

基本的には親要素に高さが指定されていれば、高さを相対値で設定できるという解釈で良いと思います。

<div id="box2">
  <div id="box2-1"></div>
</div>

#box2 {
  height: 300px;
}
#box2-1 {
  height: 50%;
}

高さの指定は絶対値（pxやemなど）でなくパーセントによる相対的な指定でも問題ありません。（ただしその指定が有効であれば、です。）

「親の親」に指定があっても駄目

親要素の高さが指定されていない場合、heightをパーセントで指定しても無視されます。また「親の親」に高さが指定されていても、「親」に高さが指定されていない場合、これも同じ結果になります。

<div id="box3">
  <div id="box3-1"></div>
</div>

#box3 {
  height: auto;
}
#box3-1 {
  height: 50%;
}

<div id="box4">
  <div id="box4-1">
    <div id="box4-1-1"></div>
  </div>
</div>

#box4 {
  height: 300px;
}
#box4-1 {
  height: auto;
}
#box4-1-1 {
  height: 50%;
}

heightを指定しない場合、あるいは無視された場合はheight:autoになります。

画面全体の高さに合わせるには

ここまでの話は部分的なブロックに対する高さの指定についてでした。さてさて画面の高さに合わせたい場合はどうするのかというと、先に結論を述べてしまいますが、html要素とbody要素にheight:100%を指定します。

<div id="box1">
  <div id="box1-1"></div>
</div>

html, body {
  height: 100%;
}

#box1 {
  height: 100%;
}

html要素はHTML文書のルート要素なので、その「親」は表示領域全体になります。それに対して100%分の高さを指定できたので、これで広がるようになりました。やったね！

なおheight:100%を指定して、さらにborderやpaddingの指定をすると、縦スクロールバーが表示されてしまいます。borderやpaddingも含めて縦一杯に広げるには、box-sizing:border-boxを指定します。詳しくはまた別の機会に。

厳密な説明とか

ここまで「親要素」と呼んできたものは、CSSでは「包含ブロック」と呼ばれるものです。

その他正確な話は、CSS 2の仕様をご確認ください。短いのですぐに読めると思います。

訳文の「特性」は「プロパティ」の事です。