CSSの高さを柔軟に設定！vh単位、calc関数、JavaScriptなどを駆使したテクニック集

2024-07-02

HTML/CSS で高さのパーセンテージが効かない理由と解決策

親要素の高さが決まっていない

パーセンテージで高さを指定する場合、その要素の親要素の高さを基準に計算されます。親要素の高さが決まっていない場合、パーセンテージ値は適用されません。

解決策：

親要素の高さを明示的に設定する。
min-height や max-height を使って、親要素の最小または最大の高さを設定する。
親要素に display: flex や display: grid を適用し、子要素の高さを自動的に調整させる。

要素が絶対配置されている

要素が position: absolute または position: fixed で絶対配置されている場合、パーセンテージで高さは指定できません。

要素の配置を position: static または position: relative に変更する。
top と bottom のプロパティを使って、要素の高さを間接的に調整する。

box-sizing プロパティの影響

要素の box-sizing プロパティが border-box 以外の場合、パーセンテージで高さは正しく計算されない場合があります。

要素の box-sizing プロパティを border-box に設定する。

ブラウザのバグ

稀なケースですが、ブラウザのバグによってパーセンテージで高さの指定が効かないことがあります。

他のブラウザで動作を確認する。
最新バージョンのブラウザにアップデートする。

高さをパーセンテージで指定する場合は、小数点以下の桁数に注意する。ブラウザによっては、小数点以下の桁数が切り捨てられる場合があります。
複数の要素の高さをパーセンテージで指定する場合、要素の順番によって計算結果が変わる場合があります。

これらの点を踏まえて、適切な方法で高さのパーセンテージを指定することで、思い通りのレイアウトを実現することができます。

以下は、上記の解決策を具体的に示したコード例です。

<!DOCTYPE html>
<html>
<head>
<style>
/* 親要素の高さを設定 */
.parent {
  height: 500px;
}

/* 子要素の高さを50%で設定 */
.child {
  height: 50%;
}

/* 絶対配置された要素の高さを設定 */
.absolute-child {
  position: absolute;
  top: 10px;
  bottom: 10px;
  height: 50%; /* 高さは効かない */
}

/* box-sizingの影響を排除 */
.box-sizing-child {
  box-sizing: border-box;
  height: 50%;
}
</style>
</head>
<body>
<div class="parent">
  <div class="child"></div>

  <div class="absolute-child"></div>

  <div class="box-sizing-child"></div>
</div>
</body>
</html>

この例では、.parent 要素の高さを 500px に設定し、その子要素である .child 要素の高さを親要素の高さの 50% に設定しています。

一方、.absolute-child 要素は絶対配置されているため、パーセンテージで高さは指定できません。代わりに、top と bottom のプロパティを使って高さを間接的に調整しています。

また、.box-sizing-child 要素は box-sizing プロパティを border-box に設定することで、padding や border の幅も含めて高さを計算するようにしています。

これらの例を参考に、状況に応じて適切な解決策を選択してください。

親要素の高さを設定

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
  height: 500px; /* 親要素の高さを500pxに設定 */
}

.child {
  height: 50%; /* 子要素の高さを親要素の高さの50%に設定 */
}
</style>
</head>
<body>
<div class="parent">
  <div class="child"></div>
</div>
</body>
</html>

min-height と max-height を使用する

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
  min-height: 300px; /* 親要素の最小の高さを300pxに設定 */
  max-height: 800px; /* 親要素の最大の高さを800pxに設定 */
}

.child {
  height: 50%; /* 子要素の高さを親要素の高さの50%に設定 */
}
</style>
</head>
<body>
<div class="parent">
  <div class="child"></div>
</div>
</body>
</html>

この例では、.parent 要素の最小の高さを 300px 、最大の高さを 800px に設定しています。子要素の .child 要素は親要素の高さの 50% に設定されるため、親要素の高さが 300px 以下の場合は 150px 、親要素の高さが 800px 以上の場合は 400px になります。

display: flex または display: grid を使用する

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
  display: flex; /* 親要素にflexレイアウトを適用 */
  height: 500px;
}

.child {
  flex: 1; /* 子要素に同じ高さを割り当てる */
}
</style>
</head>
<body>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>
</body>
</html>

この例では、.parent 要素に display: flex を設定してflexレイアウトを適用し、その子要素である .child 要素に flex: 1 を設定しています。これにより、.child 要素は親要素の残りの高さを等しく共有することになります。

要素の配置を変更する

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
  height: 500px;
}

.child {
  position: relative; /* 子要素を相対配置に設定 */
  top: 50px; /* 子要素を上部50pxの位置に配置 */
  height: 50%; /* 子要素の高さを親要素の高さの50%に設定 */
}
</style>
</head>
<body>
<div class="parent">
  <div class="child"></div>
</div>
</body>
</html>

この例では、.child 要素を相対配置 (position: relative) に設定し、上部50pxの位置 (top: 50px) に配置しています。また、高さは親要素の高さの 50% に設定しているため、親要素の下半分を占めることになります。

<!DOCTYPE html>
<html>
<head>
<style>
.child {
  box-sizing: border-box; /* 子要素にborder-boxモデルを適用 */
  height: 50%; /* 子要素の高さを親要素の高さの50%に設定 */
  padding: 20px; /* 子要素にパディングを設定 */
  border:

高さをパーセンテージで指定するその他の方法

vh単位を使用する

vh 単位は、ブラウザウィンドウの高さの1%を表す単位です。親要素の高さを考慮せずに、ウィンドウ全体の高さを基準に要素の高さを設定することができます。

<!DOCTYPE html>
<html>
<head>
<style>
.child {
  height: 50vh; /* 子要素の高さをウィンドウ高さの50%に設定 */
}
</style>
</head>
<body>
<div class="child"></div>
</body>
</html>

この例では、.child 要素の高さをウィンドウ高さの 50% に設定しています。ウィンドウの高さが変更されると、.child 要素の高さもそれに合わせて自動的に調整されます。

calc()関数を使用する

calc() 関数は、数学式を使用して要素のサイズを計算することができます。パーセンテージと他の値を組み合わせて、柔軟な高さを設定することができます。

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
  height: 500px;
}

.child {
  height: calc(50% - 20px); /* 親要素の高さの50%から20pxを引いた高さを設定 */
}
</style>
</head>
<body>
<div class="parent">
  <div class="child"></div>
</div>
</body>
</html>

JavaScriptを使用して、要素の高さを動的に設定することもできます。この方法は、ウィンドウのサイズが変更された場合などに、要素の高さを自動的に調整したい場合に役立ちます。

<!DOCTYPE html>
<html>
<head>
<style>
.child {
  height: 0; /* 初期の高さを0に設定 */
}
</style>
</head>
<body>
<script>
function setChildHeight() {
  const parentHeight = document.querySelector('.parent').offsetHeight;
  const child = document.querySelector('.child');
  child.style.height = parentHeight * 0.5 + 'px';
}

window.addEventListener('load', setChildHeight);
window.addEventListener('resize', setChildHeight);
</script>
<div class="parent">
  <div class="child"></div>
</div>
</body>
</html>