ブラウザに表示されるすべてのスペースを消費するレイアウトを作成しようとしています。html, body height 100%
別のSO投稿で提案されたように設定しました。以下は私が試しているマークアップです
<div>
<div class="header">
</div>
<div class="main">
<div class="container">
<div class="content"></div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
max-height: 100%;
}
.header {
height: 30px;
background-color: #000;
}
.main {
height: auto;
padding-right: 0px;
max-height: 100%;
width: 100%;
display: block;
clear: both;
background-color: #eee;
}
.container {
width: 90%;
overflow-y: scroll;
background-color: #ccc;
}
.content {
height: 2000px;
width: 80%;
background-color: #fff;
}
コンテンツのdivの高さにより、全身が大きくなるため、ブラウザのデフォルトのスクロールバーが表示されます。コンテンツdivのコンテンツを表示するためにcontainerdivをスクロールするように設定しましたが、それでもcontainerdivのスクロールバーは表示されません。どうすればこれを修正できますか。
これがjsfiddleです