【完全解説】CSS 100% 高さ + padding/margin で悩まない！4つの解決策

2024-04-02

CSSで要素の高さを100%に設定する際、paddingやmarginの影響を受けずに、親要素の高さぴったりに要素を収めたい場合があります。

課題

デフォルトでは、要素の高さを100%に設定しても、paddingやmarginは含まれません。そのため、paddingやmarginを設定すると、要素が親要素からはみ出てしまうことがあります。

解決策

以下の方法で、paddingやmarginを含めて要素の高さを100%に設定できます。

方法1: box-sizing: border-box を使う

box-sizing プロパティを border-box に設定すると、要素の幅と高さは、paddingとborderを含めて計算されます。

.element {
  height: 100%;
  box-sizing: border-box;
}

方法2: calc() 関数を使う

calc() 関数を使うと、paddingやmarginの値を計算式に含めて、要素の高さを設定できます。

.element {
  height: calc(100% - 20px); /* padding: 10px 上下に設定している場合 */
  margin: 0;
}

方法3: vh 単位を使う

vh 単位は、ブラウザのウィンドウの高さを基準とした相対的な長さです。

.element {
  height: 100vh;
  margin: 0;
}

注意点

box-sizing: border-box は、IE8以前ではサポートされていません。
calc() 関数を使う場合は、ブラウザの互換性を考慮する必要があります。
vh 単位は、レスポンシブデザインに適しています。

補足

上記以外にも、JavaScriptを使って要素の高さを調整する方法もあります。

上記の方法は、要素の高さだけでなく、幅にも適用できます。
paddingやmarginの値は、要素のサイズやデザインに合わせて調整してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSS 100% height with padding/margin サンプル</title>
  <style>
    .container {
      height: 300px;
      border: 1px solid #ccc;
    }

    .element {
      /* 方法1 */
      /* height: 100%; */
      /* box-sizing: border-box; */

      /* 方法2 */
      height: calc(100% - 20px); /* padding: 10px 上下に設定している場合 */
      margin: 0;

      /* 方法3 */
      /* height: 100vh; */
      /* margin: 0; */

      background-color: #f00;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="element">
      要素の内容
    </div>
  </div>
</body>
</html>

上記のコードでは、3つの方法すべてを実装しています。コメントアウトされている部分を選択して、それぞれの方法を試すことができます。

container クラスは、親要素のスタイルを定義しています。

実行結果

ブラウザで上記のコードを開くと、以下の結果が表示されます。

方法1: 子要素は、親要素の高さぴったりに収まり、paddingとborderを含めたサイズになります。
方法2: 子要素は、親要素の高さからpaddingの分だけ小さくなり、marginは設定されていません。
方法3: 子要素は、ブラウザのウィンドウの高さぴったりに収まり、marginは設定されていません。

上記はあくまでサンプルコードです。実際のコードでは、必要に応じてスタイルを調整してください。

CSS 100% height with padding/margin のその他の方法

flexboxレイアウトを使うと、要素を簡単に縦方向に並べ、高さを調整することができます。

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

.element {
  flex: 1;
  margin: 0;
}

解説

container クラスに display: flex を設定すると、flexboxレイアウトが適用されます。
height: 100% で、親要素の高さぴったりに収まります。
element クラスに flex: 1 を設定すると、親要素の残りの高さをすべて占めます。
margin: 0 で、marginを0に設定します。

gridを使う

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

.element {
  grid-area: 1 / 1;
  margin: 0;
}

element クラスに grid-area: 1 / 1 を設定すると、gridレイアウトの1行1列に要素を配置します。

position: absolute を使うと、要素を親要素の相対的な位置に配置することができます。

.container {
  position: relative;
  height: 100%;
}

.element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
}

container クラスに position: relative を設定すると、子要素を相対的に配置できるようになります。
element クラスに position: absolute を設定すると、親要素の相対的な位置に配置されます。
top: 0、bottom: 0、left: 0、right: 0 で、親要素の全域に要素を配置します。

JavaScriptを使って、要素の高さを動的に調整することができます。

const container = document.querySelector('.container');
const element = document.querySelector('.element');

const containerHeight = container.clientHeight;
element.style.height = `${containerHeight - 20}px`; // padding: 10px 上下に設定している場合