pageWrapper
コンテナにラップされ、列に3つのdivがあります。最初(ヘッダー)と最後(navWrapper)の高さは固定されています。親のdivpageWrapperが最大の高さ(ブラウザのビューポートによる)に達するまで高さを伸ばすには、真ん中の1つ(contentWrapper
)が必要です。
この問題のスキーマを描画します。
これが私の現在のソリューションのフィドルです。http://jsfiddle.net/xp6tG/
そしてここにコード
CSSとHTML
html, body{
height: 100%;
}
body{
background-color: #E3E3E3;
}
#pageWrapper{
margin: 0 auto;
position: relative;
width: 600px;
height: 100%;
}
header{
display:block;
width: 100%;
height: 100px;
background: yellow;
}
#contentWrapper{
width: 100%;
height: 100%;
background: blue;
}
#navWrapper{
width: 100%;
height: 100px;
background: green;
}
<div id="pageWrapper">
<header>
Header
</header>
<div id="contentWrapper">
Content
</div>
<div id="navWrapper">
Nav
</div>
</div>
ほぼ機能していますが、高さが高すぎるため、垂直スクロールバーが表示されます。
これを行う1つの方法があります。
次の[〜#〜] css [〜#〜]を適用します。
html, body{ height: 100%; margin: 0;}
body{ background-color: #e3e3e3;}
#pagewrapper{
margin: 0 auto;
position: relative;
width: 600px;
height: 100%;
}
header{
display:block;
width: 100%;
height: 100px;
background: yellow;
}
#contentwrapper{
width: 100%;
position: absolute;
top: 100px;
bottom: 100px;
left: 0;
background: blue;
}
#navwrapper{
width: 100%;
position: absolute;
height: 100px;
bottom: 0px;
left: 0;
background: green;
}
header
および#navwrapper
ブロック要素に高さを指定したので、親#pagewrapper
ブロックに対する絶対配置を使用して、#contentwrapper
の下部および上部オフセットを設定できます。 #navwrapper
の下部オフセット。
スクロールバーが表示された場合は、html
タグまたはbody
タグのいずれかにmargin: 0
を設定する必要がある場合があります。
CSSが呼び出された後、このスクリプトをセクションに追加してみてください。それはあなたの頭/足の要素の高さを見つけて、中央のdivの高さを画面いっぱいにします。ヘッダー/フッター要素の高さを動的にすることにした場合でも、このスクリプトは機能するため、これは適切です。
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var totalHeight = $('#pageWrapper').height();
totalHeight -= $('header').height();
totalHeight -= $('#navWrapper').height();
// Remove an extra 20px for good measure
totalHeight -= 10;
$('#contentWrapper').css('height', 'auto');
$('#contentWrapper').css('min-height', totalHeight);
});
</script>