Correct calculating of vh unit

Question

Let's say I have a simple page structure like this:

body {
    overflow: hidden;
}

body>div {
    border: 1px solid black;
}

.container {
    overflow: auto;
    height: 97vh;
    width: 97vw;
}

.content {
    width: 5000px;
    height: 5000px;
}

<body>
    <div class="container">
        <div class="content">
        </div>
    </div>
</body>

As you can see in maximized window, height of element content is 97% of viewport height, which is what I expect. But as soon as I start to decrease the height of the browser window, this element loses its 97%, approaches 100%, until it reaches a point where it is almost impossible to see the bottom scroll bar.

Shouldn't it still be at 97%? And how can I achieve it?

Is there a reason why you have `.content` with 5000 x 5000 px dimensions? — Samuli Hakoniemi, Aug 17 '21 at 12:09
Why are you taking `97%` height and width. I don't understand the reason... — DecPK, Aug 17 '21 at 12:09
It's just because the `margin` on the body pushes the element offscreen. Add `margin: 0;` to your body and you will see it stays at around 97% — Reyno, Aug 17 '21 at 12:12

score 0 · Accepted Answer · answered Aug 17 '21 at 12:22

0

Because the browser applies some default CSS. For the <body> it is :

body {
    display: block;
    margin: 8px;
}

You need to overwrite the default margin:8px by writing :

body {
    margin: 0;
}

You can also use a ready-made CSS reset file.

answered Aug 17 '21 at 12:22

Jeremy Thille

26,047
12
43
63

Correct calculating of vh unit

1 Answers1