CSS を同じ高さで使用する 6 つの方法layout_html/css_WEB-ITnose

× ディレクトリ [1] ボーダー シミュレーション [2] ネガティブ マージン [3] テーブル [4] 絶対値 [5] フレックス [6] js

前に述べたように

等しい高さのレイアウトは子の高さを参照します親要素内の要素 均等レイアウト。等高レイアウトの実装には、擬似等高と真の等高が含まれます。擬似等高は同じ高さに見えるだけですが、真の等高は実際の等高です。この記事では、ボーダーシミュレーションとネガティブマージンの2つの擬似輪郭と、テーブル実装、絶対実装、フレックス実装、js判定の4つの真の輪郭レイアウトを紹介します。要素の高さは常に同じ高さ、境界線の色です。要素の は、左右の兄弟要素の背景色を隠すために使用されます。次に、Absolute を使用して、中央の要素の左右の境界線にある透明な背景で左右の要素を覆い、視覚的に同じ高さの効果を実現します

[注] 左右の要素のコンテンツの高さは、コンテンツよりも大きくすることはできませんコンテナの高さ

<style>body,p{margin: 0;}.parent{    position: relative;}.center{    box-sizing:border-box;    padding: 0 20px;    background-clip: content-box;    border-left: 210px solid lightblue;    border-right: 310px solid lightgreen;}.left{    position: absolute;    top: 0;    left: 0;    width: 200px;}.right{    position: absolute;    top: 0;    right: 0;    width: 300px;}</style>

<div class="parent" style="background-color: lightgrey;">    <div class="left">        <p>left</p>    </div>      <div class="center" style="background-color: pink;">        <p>center</p>        <p>center</p>    </div>              <div class="right">        <p>right</p>    </div>        </div>

negative margin

背景がpadding領域に表示されるため、padding-bottomを大きな値で設定し、次に、背景色を作るために同じ値で負の margin-bottom を設定します。要素の領域をカバーし、要素のボックス モデルの計算式に準拠して、視覚的な高さが等しい効果を実現します

[注] の場合、アンカーポイントを使用してページにジャンプします, 一部のテキスト情報は非表示になります

[注意] ページ内の背景画像が下部に位置している場合、背景画像が表示されません

<style>body,p{margin: 0;}.parent{    overflow: hidden;}.left,.centerWrap,.right{    float: left;    width: 50%;    padding-bottom: 9999px;    margin-bottom: -9999px;}.center{    margin: 0 20px;}.left,.right{    width: 25%;}</style>

<div class="parent" style="background-color: lightgrey;">    <div class="left" style="background-color: lightblue;">        <p>left</p>    </div>      <div class="centerWrap">        <div class="center" style="background-color: pink;">            <p>center</p>            <p>center</p>        </div>             </div>             <div class="right" style="background-color: lightgreen;">        <p>right</p>    </div>        </div>

真の高さの等しい

table

table要素内のtable-cell要素のデフォルトは等しい高さ High

<style>body,p{margin: 0;}.parent{    display: table;    width: 100%;    table-layout: fixed;}.left,.centerWrap,.right{    display: table-cell;}.center{    margin: 0 20px;}</style>

<div class="parent" style="background-color: lightgrey;">    <div class="left" style="background-color: lightblue;">        <p>left</p>    </div>      <div class="centerWrap">        <div class="center" style="background-color: pink;">            <p>center</p>            <p>center</p>        </div>             </div>     <div class="right" style="background-color: lightgreen;">        <p>right</p>    </div>        </div>

絶対

上:0;下を設定します:0; すべての子要素の高さが親要素の高さと同じになるように、同じ高さの効果を実現します

<style>body,p{margin: 0;}.parent{    position: relative;    height: 40px;}.left,.center,.right{    position: absolute;    top: 0;    bottom: 0;}.left{    left: 0;    width: 100px;}.center{    left: 120px;    right: 120px;}.right{    width: 100px;    right: 0;}</style>

<div class="parent" style="background-color: lightgrey;">    <div class="left" style="background-color: lightblue;">        <p>left</p>    </div>      <div class="center" style="background-color: pink;">        <p>center</p>        <p>center</p>    </div>              <div class="right" style="background-color: lightgreen;">        <p>right</p>    </div>        </div>

flex

デフォルトでは、 flex の伸縮アイテムは親要素の高さまで引き伸ばされ、等高さ効果も達成されます

<style>body,p{margin: 0;}.parent{    display: flex;}.left,.center,.right{    flex: 1;}.center{    margin: 0 20px;}</style>

js

Dangzi 要素の高さが異なる場合は、js が判断して、各サブ要素が同じ高さの効果を達成できるように、下のサブ要素のpadding-bottom