[直接コレクション] 42 の一般的なフロントエンドレイアウトスキームを共有

CSS レイアウトを熟知することで、Web 開発における開発ページの速度が決まります。Web テクノロジーの継続的な革新により、さまざまなレイアウトを実現する方法は無数にあります。

この記事では、CSS の 42 の一般的なレイアウトを要約します。これらは次のカテゴリに分類できます。

水平方向に中央揃え
垂直中央
水平方向と垂直方向の中央揃え
2カラムレイアウト
3カラムレイアウト
均等なレイアウト
スティッキーフッターのレイアウト
全画面レイアウト

これらの内容はこの記事の目次でもあります。

水平方向に中央揃え

水平レイアウトを実現するのは比較的簡単で、さまざまな方法があります。ここではよく使用される 7 つのレイアウト方法を示します。一般的な CSS コードは次のとおりです。

.parent { background: #ff8787; } .child { height: 300px; width: 300px; background: #e599f7; }

その HTML 構造も固定されています。つまり、幅が <body> 幅を継承する親と、ここでは固定の 300px*300px である子です。コードは次のとおりです。

<div class="parent"> <div class="child"></div> </div>

最終的な実装効果は次のとおりです。

上の図のバラ色のブロックは親レベルで、ページの幅に応じて増加します。ラベンダー色は子レベルで、親レベルを基準にして中央に配置されます。

1. text-align 属性を使用する

要素がインラインブロックレベルの要素、つまり、display: inline-block を持つ要素の場合、その親要素に text-align: center を設定することで水平方向の中央揃えを実現できます。実装された CSS コードは次のとおりです。

.parent { /* 对于子级为 display: inline-block; 可以通过 text-align: center; 实现水平居中 */ text-align: center; } .child { display: inline-block; }

2. 固定幅のブロックレベル要素を水平方向に中央揃えにする (方法 1)

固定幅のブロックレベル要素の水平方向の中央揃えを実現する最も簡単な方法はです margin: 0 auto;が、幅を設定する必要があることに注意してください。実装 CSS コードは次のとおりです。

.child { /* 对于定宽的子元素，直接 margin:0 auto; 即可实现水平居中 */ margin: 0 auto; }

3. 固定幅のブロックレベル要素が水平方向に中央に配置されます (方法 2)

配置が有効になっている要素の場合、 left 属性と margin 実装を渡すことができます。次のように CSS コードを実装します。

.child { /* 开启定位 */ position: relative; left: 50%; /* margin-left 为负的宽度的一半 */ margin-left: -150px; }

4. 固定幅のブロックレベル要素を水平方向に中央に配置します (方法 3)

要素をオンにして配置または固定配置を決定する際、 left 属性と right 属性を一緒に設定すると要素の幅が引き伸ばされ、 width 属性と属性を連携させることでmargin 水平方向のセンタリングを実現できます。

実装 CSS コードは次のとおりです。

.parent { position: relative; height: 300px; } .child { /* 开启定位父相子绝 */ position: absolute; /* 水平拉满屏幕 */ left: 0; right: 0; width: 300px; /* 拉满屏幕之后设置宽度，最后通过 margin 实现水平居中 */ margin: auto; }

5. 固定幅のブロックレベル要素は水平方向に中央に配置されます (方法 4)

要素をオンにして配置または固定配置を決定すると、 left 属性と transform 属性を水平方向に中央揃えにすることができます。

次のように CSS コードを実装します。

.parent { position: relative; } .child { /* 开启定位 */ position: absolute; /* 该方法类似于 left 于 -margin 的用法，但是该方法不需要手动计算宽度。 */ left: 50%; transform: translateX(-50%); }

6. フレックスソリューション

Flex この中央揃えのレイアウトの効果を実現するには、さまざまな方法があります。

実装 CSS コードは以下の通り

.parent { height: 300px; /* 开启 Flex 布局 */ display: flex; /* 通过 justify-content 属性实现居中 */ justify-content: center; } .child { /* 或者子元素 margin: auto*/ margin: auto; }

7. グリッドスキーム

フレックスよりもグリッドを使用して中央レイアウトを実現する方法はたくさんあります。

次のように CSS コードを実装します。

.parent { height: 300px; /* 开启 Grid 布局 */ display: grid; /* 方法一 */ justify-items: center; /* 方法二 */ justify-content: center; } .child { /* 方法三子元素 margin: auto*/ margin: auto; }

上記は、水平方向の中央揃えレイアウトの一般的な方法のいくつかです。

垂直中央

垂直レイアウトを実現することも比較的簡単で、多くの方法がありますが、ここでは一般的に使用される 6 つのレイアウト方法と、その一般的な CSS コードは次のとおりです。

.parent { height: 500px; width: 300px; margin: 0 auto; background-color: #ff8787; } .child { width: 300px; height: 300px; background-color: #91a7ff; }

その HTML 構造も固定されています。つまり、親が子をラップし、子は 300px*300px に固定されています。コードは次のとおりです。

<div class="parent"> <div class="child"></div> </div>

最終的な実装効果は次のとおりです。

1. インラインのブロックレベル要素は垂直方向の中央に配置されます

要素がインラインブロックレベル要素の場合、基本的な考え方は、子要素に display: inline-block、vertical-align: middle を使用し、親要素の行の高さをその高さと同じにすることです。

次のように CSS コードを実装します。

.parent { /* 为父级容器设置行高 */ line-height: 500px; } .child { /* 将子级元素设置为 inline-block 元素 */ display: inline-block; /* 通过 vertical-align: middle; 实现居中 */ vertical-align: middle; }

2. 測位手法の実現（手法1）

最初の配置方法は比較的単純で、実際、top: 50%、margin-top: 負の高さの半分に等しいを使用して、垂直方向のセンタリングを実現できます。

次のように CSS コードを実装します。

.parent { /* 为父级容器开启相对定位 */ position: relative; } .child { position: absolute; top: 50%; /* margin-top: 等于负高度的一半 */ margin-top: -150px; }

3. 測位手法の実現（手法2）

2 番目の方法は、位置決めを通じて実現アイデアを実現することです: サブ要素を 100% に引き延ばし、指定された高さを設定し、margin:auto; を使用して垂直方向のセンタリングを実現しますtop 。 bottom

次のように CSS コードを実装します。

.parent { /* 为父级容器开启相对定位 */ position: relative; } .child { height: 300px; position: absolute; /* 垂直拉满 */ top: 0; bottom: 0; /* margin: auto 即可实现 */ margin: auto; }

4. 測位手法の実現（手法3）

3 番目の配置方法はより柔軟で、多くの場合に適しています。 top 組み合わせて使用してくださいtansform 。

次のように CSS コードを実装します。

.parent { /* 为父级容器开启相对定位 */ position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }

5. フレックスソリューション

Flex を使用してこの垂直方向中央のレイアウト効果を実現するには、さまざまな方法があります。

次のように CSS コードを実装します。

.parent { /* 开启 flex 布局 */ display: flex; /* 方法一 */ /* align-items: center; */ } .child { /* 方法二 */ margin: auto; }

Flex レイアウトによる実装は上記 2 つだけではありませんが、ここでは最も簡単な方法のみを紹介します。

6. グリッドスキーム

Grid 中央揃えのレイアウトを実現するには、 Flex を使用する以外にもいくつかの方法があります。

次のように CSS コードを実装します。

.parent { display: grid; /* 方法一 */ /* align-items: center; */ /* 方法二 */ /* align-content: center; */ } .child { /* 方法三 */ /* margin: auto; */ /* 方法四 */ align-self: center; }

上記は、垂直方向の中央揃えレイアウトの一般的な方法をいくつか示しています。

水平方向と垂直方向の中央揃え

水平と垂直のレイアウトを実現するには、基本的に上記の方法を組み合わせる必要がありますが、ここではよく使用される 7 つのレイアウト方法と、それらの共通 CSS コードは次のとおりです。

body { margin: 0; } .parent { height: 500px; width: 500px; background-color: #eebefa; margin: 0 auto; } .child { height: 300px; width: 300px; background-color: #f783ac; }

その HTML 構造も固定されています。つまり、親が子をラップし、子は 300px*300px に固定されています。コードは次のとおりです。

<div class="parent"> <div class="child"></div> </div>

最終的な実装効果は次のとおりです。

1. インラインブロックレベルの水平および垂直センタリングスキーム

次のように進めます。

コンテナ要素の行の高さはコンテナの高さと同じです。
text-align: center を通じて、水平方向の中央揃えを実現します
子要素を水平ブロックレベル要素として設定します
垂直方向の整列: 中央を介して; 垂直方向のセンタリングを実現します

次のように CSS コードを実装します。

.parent { /* 1. 设置行高等于容器高度 */ line-height: 500px; /* 通过 text-align: center; 实现水平居中 */ text-align: center; } .child { /* 将子级元素设置为水平块级元素 */ display: inline-block; /* 通过 vertical-align: middle; 实现垂直居中 */ vertical-align: middle; }

2. 水平および垂直センタリングスキームを実現するための位置決め (1)

次のように進めます。

コンテナ要素を基準にして子要素を配置します。
子要素に対して絶対位置指定が有効になります
この要素のオフセットを設定します。値は 50% から幅/高さの半分を引いたものです。

次のように CSS コードを実装します。

.parent { /* 1. 使子元素相对于本元素定位 */ position: relative; } .child { /* 2. 开启绝对定位 */ position: absolute; /* 3. 设置该元素的偏移量，值为 50%减去宽度/高度的一半 */ left: calc(50% - 150px); top: calc(50% - 150px); }

3. 水平垂直センタリング方式を実現するための位置決め (2)

次のように進めます。

コンテナ要素を基準にして子要素を配置します。
子要素に対して絶対位置指定が有効になります
要素のオフセットを設定します。値は 50% です。
要素を margin-value だけ後方に移動します

次のように CSS コードを実装します。

.parent { /* 1. 使子元素相对于本元素定位 */ position: relative; } .child { /* 2. 开启绝对定位 */ position: absolute; /* 3. 设置该元素的偏移量，值为 50% */ left: 50%; top: 50%; margin-left: -150px; margin-top: -150px; }

4. 水平および垂直センタリングスキームを実現するための位置決め (3)

次のように進めます。

コンテナ要素を基準にして子要素を配置します。
子要素に対して絶対位置指定が有効になります
子要素をコンテナ全体にプルします
マージンによる水平方向と垂直方向のセンタリング:自動

次のように CSS コードを実装します。

.parent { /* 1. 使子元素相对于本元素定位 */ position: relative; } .child { /* 2. 开启绝对定位 */ position: absolute; /* 3. 将子元素拉满整个容器 */ top: 0; left: 0; right: 0; bottom: 0; /* 4. 通过 margin:auto 实现水平垂直居中 */ margin: auto; }

5. 水平方向および垂直方向のセンタリングスキームを実現するための位置決め (4)

次のように進めます。

コンテナ要素を基準にして子要素を配置します。
子要素に対して絶対位置指定が有効になります
要素のオフセットを設定します。値は 50% です。
translate 逆オフセットによりセンタリングを実現

次のように CSS コードを実装します。

.parent { /* 1. 使子元素相对于本元素定位 */ position: relative; } .child { /* 2. 开启绝对定位 */ position: absolute; /* 3. 设置该元素的偏移量，值为 50%*/ left: 50%; top: 50%; /* 通过translate反向偏移的方式，实现居中 */ transform: translate(-50%, -50%); }

6. フレックスソリューション

次のように進めます。

要素を Flex レイアウトに設定する
justify-content: center および align-items: center または margin: auto; によって実現されます。

次のように CSS コードを実装します。

.parent { /* 1. 将元素设置为 Flex 布局 */ display: flex; /* 2. 通过 justify-content 以及 align-items: center 实现 */ /* justify-content: center; align-items: center; */ } .child { /* 或者通过 margin auto 实现 */ margin: auto; }

7. グリッドスキーム

Grid このスキームの実装は比較的単純であり、多くの方法があります。

次のように CSS コードを実装します。

.parent { /* 1. 元素设置为Grid 元素 */ display: grid; /* 通过 items 属性实现*/ /* align-items: center; */ /* justify-items: center; */ /* items 的缩写 */ /* place-items: center; */ /* 或者通过 content 属性 */ /* align-content: center; */ /* justify-content: center; */ /* content 的缩写 */ /* place-content: center; */ } .child { /* 或者通过 margin auto 实现 */ /* margin: auto; */ /* 或者通过 self 属性 */ /* align-self: center; justify-self: center; */ /* self 的缩写 */ place-self: center; }

水平方向と垂直方向の中央揃えのレイアウトを実現するには、主に上記の 2 つのレイアウト方法を組み合わせます。

2カラムレイアウト

いわゆる 2 列レイアウトは、1 つの列が固定幅 (幅は子要素によって決定される場合もあります) で、1 つの列がアダプティブであるレイアウトです。最終的な効果は次のようになります。

ここで使用される構造はHTML 次のとおりです。

 <div class="container clearfix"> <div class="left">定宽</div> <div class="right">自适应</div> </div>

公開 CSS コードは次のとおりです。

body { margin: 0; } .container { height: 400px; background-color: #eebefa; } .left { height: 400px; width: 200px; background-color: #f783ac; font-size: 70px; line-height: 400px; text-align: center; } .right { height: 400px; background-color: #c0eb75; font-size: 70px; line-height: 400px; } /* 清除浮动 */ .clearfix:after { content: ''; display: block; height: 0; clear: both; visibility: hidden; }

1. float+calc() 関数は、左列の固定幅右列の自己適応を完了します。

次のように進めます。

左列にフローティング
右の列にフローティング
右の列の幅は、親の 100% から左の列の幅を引いたものになります。

次のように CSS コードを実装します。

.left { /* 左边列开启浮动 */ float: left; } .right { /* 右边列开启浮动 */ float: left; /* 宽度减去左列的宽度 */ width: calc(100% - 200px); }

2. float+margin-left で左列の固定幅を完成させ、右列を適応型にします。

次のように進めます。

左列にフローティング
マージンを使用して、コンテナの左側に左列コンテナの幅の外側マージンを持たせます。

次のように CSS コードを実装します。

.left { /* 左边列开启浮动 */ float: left; } .right { /* 通过外边距的方式使该容器的左边有200px */ margin-left: 200px; }

3. Absolute+margin-left 完全左列固定幅右列適応

次のように進めます。

ドキュメントフロー外への配置を有効にする
マージンを使用して、コンテナの左側に左列コンテナの幅の外側マージンを持たせます。

次のように CSS コードを実装します。

.left { /* 开启定位脱离文档流 */ position: absolute; } .right { /* 通过外边距的方式使该容器的左边有200px */ margin-left: 200px; }

上記のスキームの左列の幅は実現する前に固定する必要があることに注意してください。次のスキームの左列は子によってサポートされます。

4. Float+overflow で左列固定幅右列適応完了

次のように進めます。

左側の要素が浮動し始めます
右側のアダプティブ要素にオーバーフローを設定すると、BFC が作成され、アダプテーションが完了します。

次のように CSS コードを実装します。

.left { /* 1. 左侧元素开始浮动 */ float: left; } .right { /* 2. 右侧自适应元素设置 overflow 会创建一个BFC 完成自适应 */ overflow: hidden; }

5. フレックスソリューション

フレックスレイアウトによるこの機能の実現は、主に flex 属性を通じて行われます。サンプルコードは次のとおりです。

.container { display: flex; } .right { flex: 1; /* flex: 1; 表示 flex-grow: 1; 即该项占所有剩余空间 */ }

6. グリッドスキーム

Grid レイアウトによるこの機能の実現は主に template 属性によって実現され、具体的なコードは次のとおりです。

.container { display: grid; /* 将其划分为两行，其中一列有本身宽度决定，一列占剩余宽度*/ grid-template-columns: auto 1fr; }

3カラムレイアウト

3 列レイアウトには主に 2 つのタイプがあります。

1 つ目は、最初の 2 列の幅が固定で最後の列が自己適応型であることですが、これは基本的に 2 列レイアウトと同じであり、2 列レイアウトを参照することで実現できます。
2 つ目は、前後の列の幅を固定し、中央に合わせることです。最終的なレンダリングは次のようになります。

パブリック CSS は次のとおりです。

body { margin: 0; } .container { height: 400px; background-color: #eebefa; } .left { height: 400px; width: 200px; background-color: #f783ac; } .content { height: 400px; background-color: #d9480f; } .right { height: 400px; width: 200px; background-color: #c0eb75; } .left, .content, .right { font-size: 70px; line-height: 400px; text-align: center; } /* 清除浮动 */ .clearfix:after { content: ''; display: block; height: 0; clear: both; visibility: hidden; }

HTML の構造は次のとおりです。

 <div class="container clearfix"> <div class="left">左</div> <div class="content">内容</div> <div class="right">右</div> </div>

1. floatで実現(1)

実装手順:

効果を完成させるには、次のように HTML 構造を調整する必要があります。

 <div class="container clearfix"> <div class="left">左</div> <div class="right">右</div> <div class="content">内容</div> </div>

左側の列コンテナはフローティングのままです
右側の列コンテナが右側にフローティングで開きます
アダプティブ要素設定のオーバーフローにより BFC が作成され、アダプテーションが完了します

以下のようにCSSコードを実装します。

.left { /* 1. 左列容器开启左浮动 */ float: left; } .content { /* 自适应元素设置 overflow 会创建一个BFC 完成自适应 */ overflow: hidden; } .right { /* 2. 右列容器开启右浮动 */ float: right; }

2. floatで実現(2)

実装手順:

効果を完成させるには、次のように HTML 構造を調整する必要があります。

 <div class="container clearfix"> <div class="left">左</div> <div class="right">右</div> <div class="content">内容</div> </div>

左側の列コンテナはフローティングのままです
右側の列コンテナが右側にフローティングで開きます
中央の適応幅を親コンテナから 2 つの固定幅列を引いたものにします。

次のように CSS コードを実装します。

.left { /* 1. 左列容器开启左浮动 */ float: left; } .content { /* 3. 使中间自适应的宽度为父级容器减去两个定宽的列 */ width: calc(100%-400px); } .right { /* 2. 右列容器开启右浮动 */ float: right; }

3. ポジションごとに実現

実装手順

左右の列はドキュメントフローから切り離され、オフセットによって独自の領域に到達します。
中央の適応幅を親コンテナから 2 つの固定幅列を引いたものにします。
コンテナを内側にマージン分だけ縮小します

次のように CSS コードを実装します。

.left { /* 1. 左右两列脱离文档流，并通过偏移的方式到达自己的区域 */ position: absolute; left: 0; top: 0; } .content { /* 2. 使中间自适应的宽度为父级容器减去两个定宽的列 */ width: calc(100%-400px); /* 3. 通过外边距将容器往内缩小 */ margin-right: 200px; margin-left: 200px; } .right { position: absolute; right: 0; top: 0; }

4. フレックスソリューション

Flex レイアウトによるこの機能の実現は、主にflex 属性によって実現されます。

次のように CSS コードを実装します。

.container { display: flex; } .right { flex: 1; /* flex: 1; 表示 flex-grow: 1; 即该项占所有剩余空间 */ }

5. グリッドスキーム

Grid レイアウトによるこの機能の実現は、主にtemplate 属性によって実現されます。

次のように CSS コードを実装します。

.container { display: grid; /* 将其划分为两行，其中一列有本身宽度决定，一列占剩余宽度*/ grid-template-columns: auto 1fr auto; }

均等なレイアウト

等分割レイアウトとはコンテナを複数の等分に分割するレイアウトですが、ここでは4等分を例に主に4つの方法を紹介します。

パブリック CSS セクションは次のとおりです。

body { margin: 0; } .container { height: 400px; background-color: #eebefa; } .item { height: 100%; } .item1 { background-color: #eccc68; } .item2 { background-color: #a6c1fa; } .item3 { background-color: #fa7d90; } .item4 { background-color: #b0ff70; } /* 清除浮动 */ .clearfix:after { content: ''; display: block; height: 0; clear: both; visibility: hidden; }

公開されている HTML コードは次のとおりです。

 <div class="container clearfix"> <div class="item item1"></div> <div class="item item2"></div> <div class="item item3"></div> <div class="item item4"></div> </div>

最終的な効果を次の図に示します。

1. 浮動小数点 + パーセント法

この方法は比較的単純で、各要素が幅の 25% を占めるようにフローティングを開きます。

次のように CSS コードを実装します。

.item { /* 开启浮动，每个元素占 25% 的宽度 */ width: 25%; float: left; }

2. インラインブロックレベル+パーセンテージ方式

この方法は上記の方法と似ていますが、インラインのブロックレベル要素にはマージンと同様のピクセルがいくつかあり、それぞれの 25% がコンテナを超えることになることに注意してください。

次のように CSS コードを実装します。

.item { /* 设置每个元素为行内块级元素，每个元素占 24.5% 的宽度 */ width: 24.5%; /* 因为行内块级元素有一些类似于边距的几个像素，导致各占25会超出容器 */ display: inline-block; }

3. フレックスソリューション

Flex レイアウトによるこの機能の実現は、主に flex 属性によって実現されます。

次のように CSS コードを実装します。

.container { /* 开启 flex 布局 */ display: flex; } .item { /* 每个元素占相同的宽度 */ flex: 1; }

4. グリッドスキーム

この機能は、主にテンプレート属性を使用してグリッドレイアウトを通じて実現されます。

以下のようにCSSコードを実装します。

.container { /* 开启 grid 布局 */ display: grid; grid-template-columns: repeat(4, 1fr); /* 使用 repeat 函数生成如下代码 */ /* grid-template-columns: 1fr 1fr 1fr 1fr; */ }

スティッキーフッターのレイアウト

いわゆる Sticky Footer レイアウトは新しいフロントエンド技術や概念ではなく、Web ページのレイアウトです。ページのコンテンツの長さが十分でない場合、下部のバーはブラウザの下部に固定され、十分な長さの場合、下部のバーはコンテンツの後ろに続きます。以下に示すように:

このレイアウトを実装する 4 つの方法は次のとおりです

一般的な CSS コードは次のとおりです。

body { margin: 0; } .container { height: 400px; display: flex; } .left { height: 400px; width: 200px; background-color: #f759ab; } .content { height: 400px; background-color: #52c41a; flex: 1; } .right { height: 400px; width: 200px; background-color: #f759ab; } .left, .content, .right { font-size: 70px; line-height: 400px; text-align: center; } .header { height: 100px; background-color: #70a1ff; } .footer { height: 100px; background-color: #ff7a45; } .header, .footer { line-height: 100px; font-size: 52px; text-align: center; }

公開されている HTML は次のとおりです。

<div class="main"> <div class="header">header</div> <div class="container"> <div class="left">left</div> <div class="content">content</div> <div class="right">right</div> </div> <div class="footer">footer</div> </div>

1. 絶対位置決めの方法

絶対配置によってスティッキーフッターレイアウトを実装する手順は次のとおりです。

最も外側のコンテナの高さを 100% に設定します。
コンテナ要素を基準にして子要素を配置し、コンテナ要素の最小高さを 100% に設定します。
padding-bottom を中央領域のフッターの高さに設定します。
下部バーは絶対的に配置され、常に下部に取り付けられます。

次のように CSS コードを実装します。

/* 1. 设置最外层容器为100% */ html, body { height: 100%; } /* 2. 让子元素元素相对于容器元素进行定位，并设置容器元素最小高度为100% */ .main { position: relative; min-height: 100%; } /* 3. 在中间区域设置 padding-bottom 为footer 的高度 */ .container { padding-bottom: 100px; } /* 由于开启了绝对定位，宽度成了自适应，设置为100% bottom:0 始终保持底部 */ .footer { position: absolute; width: 100%; bottom: 0; }

2. calc 関数を使用して次のことを実現します。

関数の使用 calc 方法は比較的単純で、中央のコンテナの最小の高さはビューポートの幅の 100% であり、頭部と底部の高さでこの関数を完成できます。

次のように CSS コードを実装します。

.container { /* 这里的中间部分的容器最少为视口宽度的 100% - 头部和底部两部分的高度即可完成该功能 */ min-height: calc(100vh - 200px); }

3. フレックスソリューション

実装手順は次のとおりです

オープン flex レイアウト
子要素の配置方向を縦配置に変更
現在のビューポートに最小の高さを設定して、中央部分がどれほど高くても、常に最下部に留まるようにします。
コンテナの中央部分の高さを適応的に設定します。

次のように CSS コードを実装します。

.main { /* 开启flex布局 */ display: flex; /* 将子元素布局方向修改为垂直排列 */ flex-flow: column; /* 设置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部 */ min-height: 100vh; } .container { /* 设置中间部分自适应 */ flex: 1; }

4. グリッドスキーム

実装手順は次のとおりです

オープン grid レイアウト
現在のビューポートに最小の高さを設定して、中央部分がどれほど高くても、常に最下部に留まるようにします。

次のように CSS コードを実装します。

.main { /* 开启grid布局 */ display: grid; grid-template-rows: auto 1fr auto; /* 设置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部 */ min-height: 100vh; }

全画面レイアウト

すべてのレイアウトは主にバックグラウンドで適用され、主な効果は次のとおりです。

全画面レイアウトを実装する 3 つの方法を次に示します。

一般的な CSS コードは次のとおりです。

body { margin: 0; } body, html, .container { height: 100vh; box-sizing: border-box; text-align: center; overflow: hidden; } .content { background-color: #52c41a; /* * 中间部门的布局可以参考两列三列布局 */ display: grid; grid-template-columns: auto 1fr; } .left { width: 240px; background-color: #52c41a; font-size: 80px; line-height: calc(100vh - 200px); } .right { background-color: #f759ab; font-size: 60px; } .header { height: 100px; background-color: #70a1ff; } .footer { height: 100px; background-color: #ff7a45; } .header, .footer { line-height: 100px; font-size: 52px; }

HTML の構造は次のとおりです。

<div class="container"> <div class="header">header</div> <div class="content"> <div class="left">导航</div> <div class="right"> <div class="right-in">自适应，超出高度出现滚动条</div> </div> </div> <div class="footer">footer</div> </div>

1. calc 関数を使用して次のことを実現します。

実装手順は次のとおりです。

関数を通じて calc 中間コンテナの高さを計算します。
中央にスクロールバーがあるコンテナは、overflow: auto に設定されています。つまり、スクロールバーが表示されるとスクロールバーも表示されます。

次のように CSS コードを実装します。

.content { overflow: hidden; /* 通过 calc 计算容器的高度 */ height: calc(100vh - 200px); } .left { height: 100%; } .right { /* 如果超出出现滚动条 */ overflow: auto; height: 100%; } .right-in { /* 假设容器内有500px的元素 */ height: 500px; }

2. フレックスソリューション

メソッドを使用して Flex このレイアウトを実装するのは比較的簡単です。

以下のようにCSSコードを実装します。

.container { /* 开启flex布局 */ display: flex; /* 将子元素布局方向修改为垂直排列 */ flex-flow: column; } .content { /* 如果超出出现滚动条 */ overflow: auto; /* 设置中间部分自适应 */ flex: 1; } .right-in { /* 假设容器内有500px的元素 */ height: 500px; }

3. グリッドスキーム

このレイアウトの場合、グリッドレイアウトは実装が非常に便利で、テンプレート属性を通じて実現できます。

以下のようにCSSコードを実装します。

.container { /* 开启grid布局 */ display: grid; grid-template-rows: auto 1fr auto; } .content { /* 如果超出出现滚动条 */ overflow: auto; } .right-in { /* 假设容器内有500px的元素 */ height: 500px; }