HTML/CSS

HTML/CSS:height100%で画面いっぱいに表示する方法


今回は画面いっぱいに幅を取る方法をメモしていきます。

横幅は簡単

横幅は、

width: 100%;

で簡単に画面いっぱいにできますよね。

でも、heightを100%にしただけでは、画面いっぱいに表示することはできません。

 

縦幅は謎の方法がある

なぜか、htmlタグとbodyタグにもheightを100%に指定する必要があります。

html {
	height: 100%;
}
body {
	height: 100%;
}

 

 

例:

<!-- HTML --> 
<div class="box"></div> 

html {
	height: 100%;
}
body {
	height: 100%;
}

.box {
	width: 100%;
	height: 100%;
	background-color: #40E0D0;
}

どう言った仕組みなのか全くわからないですが、これでうまく表示できるはずです。


ABOUT ME
ささお
3年目iOSエンジニア。 スタートアップで働いておりやす。 プログラミングスクールとエンジニアのキャリアを考えたい。 作ったアプリ - https://apps.apple.com/us/app/loverprofile/id1463563845?l=ja&ls=1