CSS Flexを使用して、左右のレイアウトの同じ高さの境界線を達成する方法は？

左右の列を実装するためのヒントCSSフレックスレイアウトの下で境界線

CSSフレックスレイアウトを使用する場合、多くの場合、ページを2つの部分に分割する必要があり、下部が2つの列に分割されます。左と右の列の高さが固定されていない場合、それらを分割する境界線が自動的に最高の高さまで伸びることができることをどのように保証できますか？この記事では、この問題を解決するための2つのソリューションを提供します。

シーン：ページは上部と下部の2つの部分に分割され、下部はフレックスレイアウトを採用します。左右の列の高さは不確かであるため、2つの列の間に等しい高さの境界が必要です。

ソリューション1：既存の構造に基づくjQuery調整

HTML構造を変更できない場合、この方法を使用できます。まず、 height: min-content;適切な要素の場合（ .rhtであると仮定）、その高さがコンテンツに適応できるようにします。次に、jQueryを使用して.rhtの高さを取得し、左要素の子要素に適用します（ .lftであると仮定）：

 let h = $（ "。rht"）。height（） 'px';
$（ "。lft div"）。css（{height：h}）;

この方法はJavaScriptに依存しており、ページが読み込まれた後に実行する必要があります。

ソリューション2：HTML構造とCSSスタイルを調整します

この方法は、JavaScriptを使用しないと、よりシンプルで効率的です。輪郭の境界線は、HTML構造とCSSスタイルを調整することで、よりエレガントに実装できます。

HTML構造の改善：

<div class="wrapper">
  <div class="top">トップコンテンツ</div> 
  <div class="content"> 
    <div class="lft">
      <div>左側のコンテンツ</div>
    </div>
    <div class="rht">
      <div>右側のコンテンツ</div>
    </div>
  </div>
</div>

対応するCSSスタイル：

 * {
  パディング：0;
  ボーダー：0;
  マージン：0;
  ボックスサイズ：ボーダーボックス; /*要素サイズの計算に影響を与える境界を避けるために追加することをお勧めします*/
}

.wrapper {
  高さ：100VH; /*ビューポートの高さ全体を占める*/
  ディスプレイ：Flex;
  フレックス方向：列; /*垂直レイアウト*/
}

.top {
  高さ：100px;
  背景：＃e3e3e3;
}

。コンテンツ {
  ディスプレイ：Flex;
  フレックス：1; /*残りのスペースを占有*/
  MIN-HEIGHT：0; /*最小高さがレイアウトに影響を与えるのを防ぐ*/
}

.lft {
  フレックス：1; /*残りのスペースを占有*/
}

.rht {
  幅：600px;
  国境左：1px固体赤;
  MIN-HEIGHT：0; /*最小高さがレイアウトに影響を与えるのを防ぐ*/
}

この計画で：

• .wrapper flex-direction: column;垂直レイアウトを実現します。
• .contentはflex: 1;残りのスペースを占有して、その高さが適応可能であることを確認します。
• .lftと.rhtの両方がmin-height: 0;最小高さがその高さを制限するのを防ぐため。
• 分割線は.rhtに直接border-left 。

ソリューション2は、パフォーマンスが向上し、メンテナンスが容易な純粋なCSSを介して実装されます。プラン2の使用を優先することをお勧めします。

以上がCSS Flexを使用して、左右のレイアウトの同じ高さの境界線を達成する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。