0
お互いの下に2つのdivを配置したい。一番上のものはその内容に応じて高さを持つべきです。下のものはウィンドウ境界に残りのスペースを埋める必要があり、下のコンテンツが大きすぎる場合はスクロール可能でなければなりません。トップDIVサイズからコンテンツ - 下部DIVスクロールして残りのスペースをウィンドウに合わせる
私は実用的なソリューションhttps://jsfiddle.net/3cm3vvv7/1/
html, body {
height: 100%;
}
body {
padding: 0px;
margin:0px;
height:100%;
}
.red {
background-color: red;
}
.green {
\t background-color: green;
}
.blue {
\t background-color: blue;
}
.purple {
\t background-color: purple;
}
\t \t .container {
\t \t display: block;
\t \t height: 100%;
}
.table {
display: table;
width: 100%;
height:100%;
}
.row {
display: table-row;
width: 100%;
}
.row-scrolling {
\t \t display: table-row;
width: 100%;
height: 100%;
position: relative;
}
.inner-table {
\t \t \t width: 100%;
height: 100%;
}
.header-cell {
display: table-cell;
padding: 5px;
height: 10%;
}
.scroll-cell {
display: table-cell;
padding: 5px;
position:relative;
\t height: 100%;
}
\t .scroll-content {
\t position: absolute;
\t top: 0px;
\t right:0px;
\t bottom: 0px;
\t left: 0px;
\t overflow-y: scroll;
\t height:100%;
}
<body>
<div class="table" >
<!-- Header -->
<div class="row">
<div class="header-cell">
Header<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>END
</div>
</div>
<div class="row-scrolling " style="background-color: red;">
<div class="scroll-cell" >
<!-- Use inner div's with position relative and absolute, to fix cell height,
making it overflow correctly. -->
<div class="scroll-content">
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
<div>Some text.</div>
</div>
</div>
</div>
<!-- footer -->
</div>
</body>を持っているが、唯一のSafari/Firefoxのため正常に動作するようです - Internet Explorerの上下の内容は切り捨てられます。
私はHTML/CSSのみのソリューションを希望しているので、JavaScriptはありません。
おかげで - だけIE 11以降のために働くように見えるflexboxes。私は約IE 9までのソリューションを好むでしょう。しかしあなたのアプローチは非常にクリーンでシンプルです！ – user1863617
@ user1863617古いブラウザではスクリプトを使用せずに、ヘッダーの動的な高さで機能するソリューションはありません。そして、ブラウザの統計情報が2％以下であるため、私はその点を見ることができません。 – LGSon
@ user1863617あなたのマークアップとスタイルの構造では、単純にそれらのユーザーにページ全体のスクロールをさせるのは本当に良いフォールバックです...私は自分のウェブサイトで全く同じシナリオを持っており、魅力的です:) – LGSon