HTML、CSS、height で画面の高さに div を拡張する方法
2024-04-10
HTML、CSS、height に関連する "Why doesn't height: 100% work to expand divs to the screen height ?" の解説
height: 100% を使用しても、div 要素が画面の高さに拡張されない場合があります。
原因：
height: 100% は相対値であり、親要素の高さに対して計算されます。デフォルトでは、html 要素と body 要素の高さは設定されていないため、div 要素の高さは 0 になります。
解決策：
以下のいずれかの方法で問題を解決できます。
- html 要素と body 要素に height: 100% を設定する
html, body {
height: 100%;
}
- vh 単位を使用する
vh 単位は、ブラウザのウィンドウポートの高さを基準に計算されます。
.my-div {
height: 100vh;
}
- Flexbox レイアウトを使用する
Flexbox レイアウトを使用すると、div 要素を簡単に画面の高さに拡張できます。
.my-div {
display: flex;
height: 100%;
}
補足：
height: autoを使用すると、div要素はコンテンツに合わせて自動的に高さが設定されます。height: 100%とheight: autoは同時に使用できません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプル</title>
</head>
<body>
<div class="my-div">
<h1>これはサンプルです</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
</html>
html, body {
height: 100%;
}
.my-div {
background-color: #ccc;
padding: 20px;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプル</title>
</head>
<body>
<div class="my-div">
<h1>これはサンプルです</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
</html>
.my-div {
background-color: #ccc;
padding: 20px;
height: 100vh;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプル</title>
</head>
<body>
<div class="my-div">
<h1>これはサンプルです</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
</html>
.my-div {
background-color: #ccc;
padding: 20px;
display: flex;
height: 100%;
}
実行結果
上記コードを実行すると、div 要素が画面の高さに拡張されます。
div 要素を画面の高さに拡張するには、いくつかの方法があります。どの方法を使用するかは、プロジェクトの要件によって異なります。
- JavaScript を使用する
JavaScript を使用して、div 要素の height プロパティを動的に設定できます。
const myDiv = document.querySelector('.my-div');
myDiv.style.height = '100vh';
- CSS Grid レイアウトを使用する
.my-div {
display: grid;
height: 100%;
}
- CSS Calc を使用する
.my-div {
height: calc(100vh - 20px);
}
- シンプルな方法で
div要素を画面の高さに拡張したい場合は、height: 100%を使用するのがおすすめです。 - より柔軟な方法で
div要素を画面の高さに拡張したい場合は、JavaScript または CSS Grid レイアウトを使用するのがおすすめです。
html css height
