cplindem cplindem - 6 months ago 25
CSS Question

Why does adding borders to a div cause vertical scrolling on a phone

I feel dumb for not being to figure this out. I have a very simple bit of HTML:

<div style="border: 40px solid red"></div>
<div style="border: 40px solid green"></div>

There is no additional css. This simply creates two empty
s with thick
s around them.

When I load this on a phone, I am able to vertically scroll down the page a small amount. There is nothing down there. What is generating this vertical scrolling?

Here's a fiddle:

And a full screen embedded version to try viewing on a phone

I get the same effect whether I view on an actual phone or in Chrome's developer tools (in phone view).

Edit Now using
s that will fit within a phone's viewport - the scrolling sill occurs.


you need to add the responsive meta tag

<meta name="viewport" content="width=device-width, initial-scale=1">

would be nice to add also margin:0 to body and box-sizing:border-box to *

something like this:

*::after {
  box-sizing: border-box
body {
  margin: 0
.b {
  border: 40px solid
.red {
  border-color: red
.green {
  border-color: green
<meta name="viewport" content="width=device-width, initial-scale=1">

  <div class="b red"></div>
  <div class="b green"></div>