【CSS】ブラウザウィンドウの高さ100％のdivを作る4つの方法！メリットとデメリットを徹底解説
ブラウザウィンドウの高さ100％のdivを作る方法
height: 100% を使用する方法
最もシンプルで簡単な方法は、height: 100% を使用する方法です。
<div class="container">
<h1>タイトル</h1>
<p>コンテンツ</p>
</div>
.container {
height: 100%;
}
この方法では、div要素の高さがブラウザウィンドウの高さ100％になります。ただし、親要素の高さが設定されていない場合は、正しく動作しません。
vh 単位を使用する方法
vh 単位は、ブラウザウィンドウの高さの1％を表します。この単位を使用することで、親要素の高さを設定しなくても、div要素の高さをブラウザウィンドウの高さ100％にすることができます。
<div class="container">
<h1>タイトル</h1>
<p>コンテンツ</p>
</div>
.container {
height: 100vh;
}
vh 単位は、最近のブラウザでサポートされていますが、古いブラウザではサポートされていない場合があります。
JavaScriptを使用して、ブラウザウィンドウの高さを取得し、div要素の高さを設定することもできます。
<div id="container">
<h1>タイトル</h1>
<p>コンテンツ</p>
</div>
const container = document.getElementById('container');
const windowHeight = window.innerHeight;
container.style.height = `${windowHeight}px`;
この方法は、すべてのブラウザで動作しますが、JavaScriptの知識が必要になります。
CSS Gridを使用する方法
CSS Grid レイアウトを使用すると、簡単にdiv要素の高さをブラウザウィンドウの高さ100％にすることができます。
<div class="container">
<div class="header">
<h1>タイトル</h1>
</div>
<div class="content">
<p>コンテンツ</p>
</div>
</div>
.container {
display: grid;
height: 100vh;
}
.header {
grid-area: 1 / 1 / 2 / 2;
}
.content {
grid-area: 2 / 1 / 3 / 2;
overflow-y: auto;
}
この方法は、最新のブラウザでサポートされています。
ブラウザウィンドウの高さ100％のdivを作るには、いくつかの方法があります。それぞれの方法にはメリットとデメリットがあるので、目的に合った方法を選択する必要があります。
補足
height: 100%を使用する場合、親要素の高さが設定されていない場合は、正しく動作しません。- JavaScriptを使用する方法では、JavaScriptの知識が必要になります。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ブラウザウィンドウの高さ100％のdiv</title>
</head>
<body>
<div class="container">
<h1>タイトル</h1>
<p>コンテンツ</p>
</div>
</body>
</html>
CSS
.container {
height: 100vh;
}
/* または */
.container {
height: 100%;
min-height: 100vh;
}
/* または */
.container {
display: grid;
height: 100vh;
}
JavaScript
const container = document.getElementById('container');
const windowHeight = window.innerHeight;
container.style.height = `${windowHeight}px`;
このコードをブラウザで実行すると、ブラウザウィンドウの高さ100％のdivが表示されます。
実行方法
このコードを実行するには、以下の手順が必要です。
- HTMLファイルを保存します。
- JavaScriptファイルを保存します。
ブラウザウィンドウの高さ100％のdivを作るその他の方法
position: absolute と top と bottom を使用する方法
<div class="container">
<h1>タイトル</h1>
<p>コンテンツ</p>
</div>
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
この方法は、position: absolute を使用して、div要素をブラウザウィンドウの左上隅に配置し、top と bottom プロパティを使用して、高さをブラウザウィンドウの高さ100％に設定します。
flexbox を使用する方法
<div class="container">
<h1>タイトル</h1>
<p>コンテンツ</p>
</div>
.container {
display: flex;
height: 100vh;
}
この方法は、flexbox を使用して、div要素の高さをブラウザウィンドウの高さ100％に設定します。
calc() 関数を使用する方法
<div class="container">
<h1>タイトル</h1>
<p>コンテンツ</p>
</div>
.container {
height: calc(100vh - 40px);
}
html css height
