heightの%指定で正しく100%のボックスを作成

高さの割合を正しく求める場合、その高さの基になる高さが必要になります。 CSSの定義では、パーセントは、生成されたボックスの包含ブロックの高さに 関して計算されるとあります。また、heightの高さが指定されてない場合、 heightの初期値はautoとなります。 (参考: 仕様書(邦訳))

包含関係のルート要素はUserAgentによって定める事になっているので、 htmlの高さを明示的に100%に指定します。次にbodyの高さを明示的に100%に指定します。

このようにすることによってbody以下の要素に対して高さを指定する基準を明示的に設定します。

CSSの例

*{
    margin:0;
    padding:0;
}
html{
    height:100%;
}
body{
    height:100%;
    margin:0 30px 0 30px; 
}
#container{
    height:100%;
    border-left:1px dotted #F6800B;
    border-right:1px dotted #F6800B;
}
body > #container {
    height: auto;
}

body > #containerを指定することで、1画面を超える長さのでの表示を 正しく行うようにします。