上部にヘッダー 100px を配置するレイアウトを設計しようとしています。フッター 80px は、常にブラウザー画面の下部と、ヘッダーとフッターの間のスクロール可能なコンテンツ領域に固定されます。コンテンツがフッターの上端に触れるまで、書き込みが終了すると、垂直スクロールバーがコンテンツ領域に表示されるはずです。
どうすればこれを達成できるか教えてもらえますか
これが私が試したことです: JsFiddle
<header>
</header>
<div id="main">
<div id="content">
scrollable content area
</div>
<footer>
footer always appearing bottom of the browser screen
</footer>
</div>
私のCSS:
header {
height: 100px;
width: 100%;
background: #bbb;
}
#main {
background: #ccc;
width: 100%;
height: 100%
}
#content {
position: relative;
height: 100%;
width: 100%;
background: green;
overflow-y: auto;
}
footer {
position: relative;
bottom: 0;
height: 80px;
width: 100%;
background: #aaa;
}