ヘッドとテールの固定途中で高さ適応を達成する4つの方法
ポジショニング
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>最初と最後の中間の高さ固定適応</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0
}
.head {
height:80px;
line-height:80px;
background: #690;
width: 100%;
position: absolute;
top: 0;
text-align: center;
}
.body {
background: #FC0;
width: 100%;
overflow: auto;
top: 80px;
position: absolute;
text-align: center;
bottom: 80px;
}
.foot {
height: 80px;
line-height: 80px;
background: #690;
width: 100%;
position: absolute;
bottom: 0;
text-align: center;
}
</style>
</head>
<body>
<div class="head">ヘッダー80px固定;</div>
<div class="body">
中間適応<br>
中間適応<br>
中間適応<br>
中間適応<br>
中間適応<br>
中間適応<br>
中間適応<br>
中間適応<br>
中間適応<br>
</div>
<div class="foot">テール80px固定</div>
</body>
</html>
ブラウザの効果イメージは以下の通り、携帯電話側とブラウザ側の効果は同じですが、ここでは携帯電話側のみを表示し、ie6以下の方法はサポートされていませんが、その他のブラウザはサポートされています。
、フレキシブルなレイアウト
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>最初と最後の中間の高さ固定適応</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0
}
.wrap {
display: flex;
flex-direction: column;
height: 100%;
}
.head1 {
height:80px;
line-height:80px;
background: #690;
width: 100%;
text-align: center;
}
.body1 {
background: #FC0;
width: 100%;
overflow: auto;
text-align: center;
flex: 1;
}
.foot1 {
height: 80px;
line-height: 80px;
background: #690;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div class="wrap">
<div class="head1">ヘッダー80px固定;</div>
<div class="body1">
中間適応<br>
中間適応<br>
中間適応<br>
中間適応<br>
中間適応<br>
中間適応<br>
中間適応<br>
中間適応<br>
中間適応<br>
</div>
<div class="foot1">テール80px固定</div>
</div>
</body>
</html>
ブラウザの効果イメージは次のとおりです、携帯電話とブラウザ側の効果は同じですが、ここではブラウザ側のみを表示し、ブロックレベルの範囲を超えた中央のコンテンツは、スクロールバーが表示されます、需要に応じて設定することができ、ie8以上と互換性のあるcss3属性のためのフレックス。
、テーブルレイアウト
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>最初と最後の中間の高さ固定適応</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0
}
.wrap {
display: table;
flex-direction: column;
height: 100%;
width: 100%;
}
.wrap > div {display: table-row;}
.head {
height:80px;
line-height:80px;
background: #690;
width: 100%;
text-align: center;
}
.body {
background: #FC0;
width: 100%;
text-align: center;
}
.foot {
height: 80px;
line-height: 80px;
background: #690;
text-align: center;
}
</style>
</head>
<body>
<div class="wrap">
<div class="head">ヘッダー80px固定;</div>
<div class="body">
ミドルアダプティブテーブル方式<br>
ミドルアダプティブテーブル方式<br>
ミドルアダプティブテーブル方式<br>
ミドルアダプティブテーブル方式<br>
ミドルアダプティブテーブル方式<br>
ミドルアダプティブテーブル方式<br>
ミドルアダプティブテーブル方式<br>
ミドルアダプティブテーブル方式<br>
</div>
<div class="foot">テール80px固定</div>
</div>
</body>
</html>
ブラウザの効果イメージは次のとおり、携帯電話やブラウザ側の効果は同じですが、ここではブラウザ側のみを表示し、ブロックレベルの範囲を超えた中央のコンテンツは、スクロールバーが表示されます。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>最初と最後の中間の高さ固定適応</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0
}
.wrap {
width: 100%;
height: 100%;
display: grid;
grid-template-rows: 80px auto 80px;
text-align: center;
}
.wrap .head, .wrap .foot {
background-color: #690;
line-height: 80px;
}
.wrap .body { background-color:#FC0; }
</style>
</head>
<body>
<div class="wrap">
<div class="head">ヘッダー80px固定;</div>
<div class="body">
ミドルアダプティブグリッド方式<br>
ミドルアダプティブグリッド方式<br>
ミドルアダプティブグリッド方式<br>
ミドルアダプティブグリッド方式<br>
ミドルアダプティブグリッド方式<br>
ミドルアダプティブグリッド方式<br>
ミドルアダプティブグリッド方式<br>
ミドルアダプティブグリッド方式<br>
</div>
<div class="foot">テール80px固定</div>
</div>
</body>
</html>
ブラウザ効果イメージは以下の通り、携帯とブラウザ側の効果は同じですが、ここではブラウザ側のみを表示し、ブロックレベルを超えた中間コンテンツはスクロールバーが表示されます。ie8以上に対応
