Unwanted scrollbars when placing two divs below each other

Question

I have two fullscreen divs which are placed relatively below each other. But when I'm visiting the page, the browser always shows me unwanted scrollbars and a width greater than 100vw. When there is only one div, the whole thing works like a charm. Would appreciate any help here :)

    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="normalize.css">
    <style>
    .section {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: red;
    
    }
        
        .section.second {
            background-color: green;
        }
    </style>
    
    
    </head>
    <body>
    
    <div class="section">ASD1</div>
    
    <div class="section second">ASD2</div>
    
    
    
    </body>
    </html>

score 0 · Answer 1 · answered Feb 08 '18 at 18:15

0

Thats because BODY element has its own margins by default. You need to make it zero. You can check it here (jsfiddle example).

body {   margin: 0; }

answered Feb 08 '18 at 18:15

Arty9000

103
8

score 0 · Accepted Answer · answered Feb 08 '18 at 18:17

0

This is a known issue.

According to https://caniuse.com/#feat=viewport-units,

"Currently all browsers but Firefox incorrectly consider 100vw to be the entire page width, including vertical scroll bar, which can cause a horizontal scroll bar when overflow: auto is set."

You can add following CSS style to fix it,

html, body {margin: 0; padding: 0; overflow-x:hidden;}

Example (JSBin)

answered Feb 08 '18 at 18:17

GeekAb

505
4
15

Let's set the text-align to right. In [this](https://jsfiddle.net/tbd5htx2/) fiddle you can see that this solution causes the content to be displayed under the scroll bar because it is not adjusted if one just sets the overflow to hidden. Consider using `max-width: 100%` instead, like in [this](https://jsfiddle.net/e6f4f19g/) fiddle. – Anonymous Feb 08 '18 at 18:53
Well, If max-width is set to 100% then we don't need 100vw in the first place. As there is no positioned ancestor and its reference is the body only we can just have used width 100%. Point was issue with vw values. Instead, we can use right padding for content which can solve the problem. – GeekAb Feb 08 '18 at 19:00

score -1 · Answer 3 · answered Feb 08 '18 at 18:44

First of all, to remove unwanted margins and paddings, you should always perform a CSS reset (resets all browser specific properties to zero) or a CSS normalization (sets all properties to the same default value for every browser, but not zero). For debugging purposes it is enough to write the following:

* {
  margin: 0;
  padding: 0;
}

In a real project you should definitely use a better solution like Eric Meyer’s reset or Normalize.css.

Okay, now we managed to solve the spacing issue, but this still leaves us with the scrollbar issue. For a solution look at this post. It says

(...)the horizontal scroll is present because of the vertical scroll. which you can solve by giving max-width: 100%.

Hence, this is the final solution:

* {
  margin: 0;
  padding: 0;
}

.section {
  position: relative;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  background-color: red;
}

.section.second {
  background-color: green;
}

<div class="section">ASD1</div>
<div class="section second">ASD2</div>

Unwanted scrollbars when placing two divs below each other

3 Answers3