100vh on responsive website

I. What's wrong with it

I believe you have once in your life built a responsive web. In case you haven't, responsive web design aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction.

So what's wrong? There was nothing wrong if you use an android device, on PC, or when you test mobile responsive on your PC, but on ios devices, there was this problem where the scroll area is not the actually the area you expected it to be when you use 100vh and developers had to rely on workarounds to solve this bug.

With toolbar and url bar, scroll section becomes taller than expected. (I'll call this case 1)

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

When scrolling down these dynamic toolbars will retract. In this state, elements sized to be 100vh tall will cover the entire viewport. (I'll call this case 2)

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

II. What changed

There are additional relative length units in the CSS Values and Units Level 4 specification. This make it easier to scale from one output environment to another. With these specifications, we now have small viewport (for case 1) and large viewport (for case 2).

III. How to implement

This part is actually the main point i want to share

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

From now on, when you build responsive web design and need to use 100vh, PLEASE consider using 100dvh instead. It will help to dynamically adapt to your device view port and avoid above bug.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>

    body {
      min-height: 100dvh;
      max-height: 100dvh;
      overflow: hidden;
    }

    .all-your-content-div {
      max-height: 100%;
      overflow: auto;
    }
  </style>
</head>

<body>
  <div></div>
</body>

</html>

I. What's wrong with it

II. What changed

III. How to implement

Read more

Create mock API with Mockoon

CSS: subgrid, container queries, has()

Convert CSV file from UTF-8 to Shift_JIS

Supabase Overview