CODEWITHSUNDEEP
htmlcss
user2952267
user2952267

Reputation: 79

VW elements overflowing

Why 2 divs are overflowing each other? I have equally divided two divs with viewport width. Insted of 50% width if I am giving 49% then code is working fine

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            border: 0;
        }
        .fity{
            width: 50vw;
            height: 100vh;
            float: left;        

        }
    </style>
</head>
<body>

<div class="fity" style="background:red;"></div>
<div class="fity" style="background:blue;"></div>
</body>
</html>

Upvotes: 1

Views: 288

Answers (1)

Paulie_D
Paulie_D

Reputation: 115135

It's because of the vertical scroll bar.

MDN Information

Viewport-percentage lengths defined a length relatively to the size of viewport, that is the visible portion of the document. Only Gecko-based browsers are updating the viewport values dynamically, when the size of the viewport is modified (by modifying the size of the window on a desktop computer or by turning the device on a phone or a tablet).

In conjunction with overflow:auto, space taken by eventual scrollbars is not substracted from the viewport, whereas in the case of overflow:scroll, it is. [My Emphasis]

If you add overflow:hidden to the body it gets fixed. -

JSFiddle Demo

Upvotes: 2

Related Questions