Introduction

While creating an application with Rails in the curriculum of a certain programming school, I was in a situation to set the size of full screen display elements such as background images in consideration of the viewport.

.hoge {
  width: 100vw;
  height: 100vh;
}

I wrote, but the model answer is

.hoge {
  width: 100%;
  height: 100vh;
}

Although they look the same, I was wondering why this difference was ... and searched variously.

** If you want the elements to fill the height of the page, use 100vh 100% is often used when arranging the element to fill the width of the page **

I saw some explanations of the contents. I was wondering why I used it properly, so I investigated it.

Consideration / verification

First of all, let's review.

viewport Refers to the area displayed in the browser. In today's world where browsers are viewed not only from personal computers but also from smartphones and tablets, it is important to create a viewport-conscious page appearance.

vw(viewport width) A unit that specifies width as a percentage of the width of the viewport. 1vw = 1% of the width displayed in the browser

vh(viewport height) A unit that specifies height as a percentage of the height of the viewport. 1vh = 1% of the height displayed in the browser

At this point, I want to specify CSS for full screen elements with vw and vh, but why is it said that "width of full screen element is% and height is generally vh"? Is not it?

~ I found a good commentary ~

Master how to specify CSS width and height )

Here, I would like to pay attention to the difference between 100% and 100vh. 100% is the ratio to the parent element. 100vh is the ratio to the viewport (screen size).

** About width **

If the width is not specified by px at all up to the body, the width of the browser = the width of the body. In other words, the width of the body changes depending on the viewing terminal and the size of the browser window.

From the above quote, we can see that width is ** browser width ** body element width ** if no px is specified for the parent element. In other words, 100% width for the body element (parent element) in this case has the same meaning as the browser standard 100vw. As a result, the width 100% of the full screen background element looks the same as 100vw, so "width is%" is considered good in this case.

** About height **

Unless otherwise specified in CSS, the height value of the element will be auto and the height will be determined automatically. Basically, unlike width: auto, which spreads horizontally, height: auto does not spread vertically. It will be as high as the contents of elements such as characters and images. If there is a child element inside, the height will increase accordingly.

From the above quote, we can see that ** "height of parent element = height of contents" **. In other words, if there is no reference height, the child element cannot be specified by%. As a result, for elements like full-screen backgrounds, it seems that vh needs to specify the height as the browser height reference.

From this commentary, in this case

--When arranging the element to fill the width of the page → 100% because it looks the same as 100vw

--When arranging elements to fill the height of the page → 100vh because the height must be based on the browser

It was refreshing that it meant that.

At the end

I'm still a beginner, so to establish my knowledge I would like to continue to be conscious of understanding from the original "mechanism" of the method, not just the "method" of this kind of thing.

I hope you find it helpful. Thank you for reading to the end.

Postscript

2020/10/31 [CSS] Viewport (vw, vh) and Percentage (%), a smart way to use units suitable for responsiveness In this article, about specifying% of width

"Vw" determines its size based on the width of the viewport. The width of this viewport is calculated by the size including the scroll bar of the browser. If the page is long and scrollbars are visible, the width of the viewport will be wider than the width of the html element. Therefore, if you set an element to "100vw", the element will be larger than html and body.

So, to prevent misalignment when there is a scroll bar It is explained that width should be specified by%. I was more convinced ...!

Reference article

[CSS] Viewport (vw, vh) and Percentage (%), a wise way to use units suitable for responsiveness Active engineers explain the difference between 100vh and 100%, which specifies the height of elements with CSS [for beginners]

If you don't know, you lose! Responsive site creation progresses by mastering CSS vh / vw