目次
- はじめに：親要素の高さを「取得したい」と思ったあなたへ
- 結論：CSSで親要素の高さは「取得」できない
- なぜCSSで親要素の高さが取得できないのか
- height:100%が効かない典型例
- 解決方法①：親に明示的な高さを与える
- メリット
- デメリット
- 解決方法②：vhを使う（画面基準）
- vhとは
- スマホで100vhがズレる問題
- 解決方法③：min-heightで安全設計
- 解決方法④：Flexboxで高さを揃える（実務最強）
- なぜこれで揃うのか？
- よくある失敗
- 解決方法⑤：CSS Gridで高さ共有
- JavaScriptで親要素の高さを取得する方法
- 取得できる高さの違い
- CSS変数とJSを組み合わせる実務パターン
- DevToolsで高さ問題を調査する手順
- ① 親要素を選択
- ② autoになっていないか確認
- ③ overflow指定の有無を確認
- ④ 100vwを使っていないか確認
- 横スクロール問題との関係
- よくある勘違いチェックリスト
- 目的別の最適解まとめ
- 親と同じ高さにしたい
- 画面いっぱいにしたい
- 最低高さを確保したい
- 数値として使いたい
- まとめ：高さは「取得」ではなく「設計」で解決する
はじめに：親要素の高さを「取得したい」と思ったあなたへ
CSSでレイアウトを組んでいると、ほぼ確実にぶつかるのがこの問題です。
- 子要素を親要素の高さに合わせたい
height: 100%がなぜか効かない- スマホだけ高さが崩れる
- 横スクロールが出てレイアウトが破綻する
私も駆け出しの頃、「100%って書いてるのに100%にならないってどういうこと？」と本気で混乱しました。
でもこれはセンスの問題ではありません。CSSの高さ計算の仕組みを知らないだけです。
この記事では、
- なぜ height:100% が効かないのか
- vh / min-height の正しい使い方
- Flex / Gridで高さを揃える考え方
- JavaScriptで親要素の高さを取得する方法
- スマホ崩れ・横スクロール問題の原因
まで、実務で何度も修正してきた視点で解説します。
結論：CSSで親要素の高さは「取得」できない
CSSでは親要素の高さを値として取得することはできません。
height:100% は「親に明示的な高さがある場合のみ」有効です。
この一文を理解できれば、この記事の8割はクリアです。
なぜCSSで親要素の高さが取得できないのか
CSSは「値を読み取る言語」ではありません。
あくまで「ルールを宣言する言語」です。
.child {
height: 100%;
}この100%は、
- 親要素に高さが明示されている
- その値を基準に割合を計算できる
という条件があって初めて成立します。
親が height: auto; の場合、基準値が存在しません。
つまり「計算できない」状態なのです。
height:100%が効かない典型例
<div class="parent">
<div class="child"></div>
</div>.parent {
height: auto;
}
.child {
height: 100%;
}なぜ効かないのか？
- 親は中身に応じて高さが決まる（auto）
- 子は親の高さを基準にしたい
- でも親の高さが確定していない
この「循環依存」が原因です。
ここで無理に absolute を使ったり、transformで逃げたりすると、
後でスマホ崩れや横スクロール問題の原因になります。
解決方法①：親に明示的な高さを与える
.parent {
height: 300px;
}
.child {
height: 100%;
}メリット
- 確実に動作
- デバッグしやすい
デメリット
- レスポンシブに弱い
- コンテンツ増減で破綻しやすい
LPのヒーロー固定ブロックなど限定用途ならOKです。
解決方法②：vhを使う（画面基準）
.parent {
height: 100vh;
}vhとは
- 1vh = ビューポート高さの1%
- 100vh = 画面いっぱい
ヒーローセクションでよく使われます。
スマホで100vhがズレる問題
iPhone Safariでは、
- アドレスバーの表示／非表示で高さが変動
- 100vhが実画面と一致しない
最近は 100dvh を使うのがベストです。
height: 100dvh;ここを知らないと、スマホだけレイアウトが崩れます。
解決方法③：min-heightで安全設計
.parent {
min-height: 100vh;
}実務ではこちらをよく使います。
- 最低高さを確保
- 中身が増えれば自動で伸びる
- スマホ崩れに強い
固定より「伸びる設計」の方が事故が少ないです。
解決方法④：Flexboxで高さを揃える（実務最強）
高さを取得するのではなく、揃える発想に切り替えます。
.parent {
display: flex;
}
.child {
flex: 1;
}なぜこれで揃うのか？
Flexは余白を分配するレイアウトモデルです。
高さを明示しなくても、コンテナ基準で自動調整されます。
よくある失敗
align-items: stretch;実はこれデフォルト。
上書きして崩しているケース、かなり多いです。
解決方法⑤：CSS Gridで高さ共有
.parent {
display: grid;
}Gridはセル単位でサイズを共有します。
- 単純な高さ揃え → Flex
- 複雑なレイアウト → Grid
この使い分けが重要です。
JavaScriptで親要素の高さを取得する方法
CSSでは数値取得不可。
でもJSなら可能です。
const parent = document.querySelector('.parent');
const height = parent.offsetHeight;
console.log(height);取得できる高さの違い
| プロパティ | 内容 |
|---|---|
| offsetHeight | border + padding込み |
| clientHeight | padding込み |
| scrollHeight | 内部コンテンツ全体 |
用途によって使い分けます。
CSS変数とJSを組み合わせる実務パターン
const parent = document.querySelector('.parent');
function updateHeight() {
document.documentElement.style.setProperty(
'--parent-height',
parent.offsetHeight + 'px'
);
}
updateHeight();
window.addEventListener('resize', updateHeight);.child {
height: var(--parent-height);
}これで動的同期が可能です。
DevToolsで高さ問題を調査する手順
高さが崩れたら、必ずやります。
① 親要素を選択
→ Computedタブでheight確認
② autoになっていないか確認
③ overflow指定の有無を確認
④ 100vwを使っていないか確認
横スクロール問題との関係
意外と多い原因：
width: 100vw;- 負のmargin
- absolute配置のはみ出し
100vwはスクロールバー幅を含むため、
横スクロールの原因になります。
対策は：
width: 100%;を使うこと。
よくある勘違いチェックリスト
☑ CSSで高さを取得できると思っている
☑ autoでも100%が効くと思っている
☑ 子要素だけで解決しようとする
☑ absoluteで無理やり合わせる
☑ スマホ検証を後回しにする
当てはまったら設計を見直しましょう。
目的別の最適解まとめ
親と同じ高さにしたい
→ Flex / Grid
画面いっぱいにしたい
→ 100dvh
最低高さを確保したい
→ min-height
数値として使いたい
→ JavaScript
まとめ：高さは「取得」ではなく「設計」で解決する
CSSでは親要素の高さを直接取得することはできません。
しかし、
- 高さ計算の仕組みを理解する
- レイアウトモデルを正しく使う
- 必要ならJavaScriptを併用する
これだけで、ほとんどの高さ問題は解決します。
height:100%が効く条件を理解できれば、
CSSレイアウトは一段レベルが上がります。
そして次に悩むのは「幅」です。
それはまた別の記事で解説します。