html - ヘッダーを考慮したコンテンツ領域の高さ 100%

Question

画面の長さを埋めようとしていますが、高さ 100% のコンテンツ領域がヘッダーを無視するため、領域が長くなりすぎます。他の SO ソリューションは完全には機能しません。

コンテンツの増加に合わせて調整できるようにする必要があり (#mainView ではなくページのスクロール バーを使用)、ページを埋めるのに十分なコンテンツがない場合は、#mainView が画面を埋める必要があります (スクロールなし)。

http://jsfiddle.net/SsF8S/6/

CSS:

html, body { height: 100%; margin: 0px; }
#container{margin:20px;height:100%}
#header { height: 80px; background: pink; }
#mainView { height: 100%; background: red; box-sizing: border-box; border:solid 4px pink;border-top:none; }

HTML:

<div id="container">
   <div id="header">
     --Header
   </div>
   <div id="mainView">
     --Main
   </div>
</div>

Answer 1

mainView の CSS へのいくつかの小さな変更...

、、、およびプロパティabsoluteを設定して作成します。次に、古い高さを削除し、オーバーフローを変更して、必要に応じてスクロール バーを追加します。topleftbottomright

#mainView {
    background:red;
    position:absolute;
    top:80px;
    bottom:0;
    right:0;
    left:0;
    overflow:auto;
}

jFiddle の例: http://jsfiddle.net/SsF8S/2/

Answer 2

ヘッダーがメイン ビューに重なるようにし、メイン ビューの上部をパディングしてそれを回避します。

#header {
  height:80px;
  background:black;
  position: absolute; 
  top: 0; 
  left: 0;
  width: 100%; 
}

#mainView { 
  height:100%; 
  background:red;
  padding-top: 80px;
  box-sizing: border-box;
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
}

このソリューションで jsFiddle を更新しました: http://jsfiddle.net/upQpj/

Answer 3

メインコンテナを持つことができます。

<style type="text/css">

html,body{height:100%;margin:0px;}
#header{height:80px;background:black;}
#container{height:100%; background:red;}

</style>

<div id="container">
<div id="header">
  --Header
</div>
<div id="mainView">
  --Main
</div>
</div>