Bootstrap 3 二列フルハイト解説

Bootstrap 3 の二列フルハイトについて

Bootstrap 3 で二列をフルハイト（画面の高さに合わせる）にする方法は、主に CSS のグリッドシステムと Flexbox を利用します。

グリッドシステムによる方法

• 親要素の高さ
  コンテナの親要素（例えば、body）に height: 100% を設定し、コンテナの高さも画面の高さに合わせます。
• 高さ調整
  .col-md-6 に height: 100% を設定して、列の高さをコンテナと同じにします。
• 列
  .col-md-6 クラスを使用して、二列に分割します。
• コンテナ
  .container クラスを使用して、グリッドシステムのコンテナを作成します。

HTML

<div class="container">
  <div class="row">
    <div class="col-md-6">
      </div>
    <div class="col-md-6">
      </div>
  </div>
</div>

CSS

body {
  height: 100%;
}

.container {
  height: 100%;
}

.col-md-6 {
  height: 100%;
}

Flexbox による方法

• Flexbox プロパティ
  コンテナに display: flex を設定し、列に flex: 1 を設定して、列がコンテナの高さに合わせて伸縮します。

<div class="container">
  <div class="row">
    <div class="col-md-6">
      </div>
    <div class="col-md-6">
      </div>
  </div>
</div>

.container {
  display: flex;
  height: 100%;
}

.row {
  flex: 1;
}

.col-md-6 {
  flex: 1;
}

注意

• Flexbox はより柔軟なレイアウトが可能ですが、ブラウザのサポート状況を考慮する必要があります。
• どちらの方法でも、コンテナの親要素の高さや列のコンテンツの高さによって、最終的な表示結果が影響を受けることがあります。

Bootstrap 3 二列フルハイト解説とコード例

<div class="container">
  <div class="row">
    <div class="col-md-6">
      </div>
    <div class="col-md-6">
      </div>
  </div>
</div>

body {
  height: 100%;
}

.container {
  height: 100%;
}

.col-md-6 {
  height: 100%;
}

解説

• body にも height: 100% を設定し、コンテナの親要素の高さも画面の高さに合わせます。
• height: 100% を設定することで、列の高さをコンテナと同じにします。
• .col-md-6 クラスは、列を二分割します。
• .row クラスは、行を作成します。

<div class="container">
  <div class="row">
    <div class="col-md-6">
      </div>
    <div class="col-md-6">
      </div>
  </div>
</div>

.container {
  display: flex;
  height: 100%;
}

.row {
  flex: 1;
}

.col-md-6 {
  flex: 1;
}

• .row と .col-md-6 に flex: 1 を設定することで、列がコンテナの高さに合わせて伸縮します。
• .container に display: flex を設定し、Flexbox コンテナにします。

どちらの方法を選ぶべきか？

• Flexbox
  より柔軟なレイアウトが可能。
• グリッドシステム
  シンプルで理解しやすい。

どちらの方法も有効ですが、プロジェクトの要件やチームのスキルに応じて選択してください。

• Flexbox はブラウザのサポート状況を考慮する必要があります。

テーブルを利用する方法

• 解説
  テーブルのセルを二列に分割し、テーブルの高さを 100% に設定することで、フルハイトを実現します。ただし、テーブルはレイアウトの柔軟性が低く、現代的なデザインには適さない場合があります。
• CSS
  

  .table {
    height: 100%;
  }
  

• HTML
  

  <table class="table table-bordered">
    <tr>
      <td>Column 1</td>
      <td>Column 2</td>
    </tr>
  </table>
  

JavaScriptによる動的な調整

• 解説
  ウィンドウのサイズが変更されたときに、列の高さをウィンドウの高さからコンテナのオフセットトップを引いた値に設定します。これにより、コンテナ内の列が常にフルハイトになります。
• JavaScript
  

  $(window).on('resize', function() {
    $('.col-md-6').height($(window).height() - $('.container').offset().top);
  });
  

• HTML
  

  <div class="container">
    <div class="row">
      <div class="col-md-6">
        </div>
      <div class="col-md-6">
        </div>
    </div>
  </div>
  

CSS Grid Layoutを利用する方法

• 解説
  CSS Grid Layoutを使用して、グリッドを作成し、列を二分割します。グリッドの高さを 100% に設定することで、フルハイトを実現します。
• CSS
  

  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
  }
  
  .item {
    height: 100%;
  }