web-dev-qa-db-ja.com

Bootstrap 4行は残りの高さを埋めます

利用可能な高さの残りを埋めるために行を引き伸ばすのに苦労しています。行クラスにh-100を追加しようとしましたが、画面の下部に空白が発生します。それを行う方法がなければなりませんが、私は完全に困惑しています..ここに私のコードがあります：

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div style="height:200px">ROW 1</div>
          </div>
        </div>
        <div class="row justify-content-center bg-blue">
          <div class="text-white">ROW 2</div>
        </div>
      </div>
    </div>
    <div class="col-8 bg-gray"></div>
  </div>
</div>

codepen： https://codepen.io/ee92/pen/zjpjXW/?editors=11

enter image description here

青い行（行2）ですべての赤いスペースを埋めたいです。助言がありますか？

ありがとう

htmlcssgridbootstrap-4row
14
Egor

Bootstrap 4.1 flex-grow-1 class ...を使用します.

https://www.codeply.com/go/Iyjsd8djnz

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100 d-flex flex-column">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div style="height:200px">ROW 1</div>
          </div>
        </div>
        <div class="row justify-content-center bg-blue flex-grow-1">
          <div class="text-white">ROW 2</div>
        </div>
      </div>
    </div>
    <div class="col-8 bg-gray"></div>
  </div>
</div>

Update 4.3.1： vh-100ユーティリティクラスを使用した別の例

関連： 行の残りの高さを伸ばす方法

21
Zim

コンテナを列方向（.d-flex.flex-column）のフレックスボックスにし、行2に.colクラスを指定して、垂直方向に展開します。

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">

      <!-- these classes here -->
      <div class="h-100 d-flex flex-column">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div style="height:200px">ROW 1</div>
          </div>
        </div>

        <!-- adding col adds the style flex-grow: 1 -->
        <div class="row justify-content-center bg-blue col">

          <div class="text-white">ROW 2</div>
        </div>
      </div>
    </div>
    <div class="col-8 bg-gray"></div>
  </div>
</div>

CodePenデモ

0
Jonathan Lam

これは解決策です。ラッパーdivにはh-100が必要で、高さに適応するdivにはflex-grow-1およびoverflow-autoが必要です。このように、divは、コンテンツが使用可能なスペースよりも小さい場合にスペースを埋めるように成長し、コンテンツが使用可能なスペースよりも高い場合にスクロールバーを表示します。

デモjsfiddle

<div class="h-100 d-flex flex-column bg-yellow px-2">
<div class="flex-column justify-content-center bg-purple px-2">        
    <div class="text-white p-0" style="height:50px">HEADER</div>
</div>

<div class="flex-column justify-content-center bg-red text-white px-2 flex-grow-1 overflow-auto">

        <div>Item1</div>
        <div>Item2</div>
        INNER text 1<br>
        INNER text 2<br>

</div>

<div class="flex-column justify-content-center bg-darkblue px-2">
    <div class="text-white p-0" style="height:50px">FOOTER</div>
</div>
0
Alejandro Bazán