Andrey (azangru) wrote,

CSS is hard...

Here’s someone’s site with a characteristic symptom of setting width to 100vw (and using a mac while doing so) — a horizontal scrollbar with thin extra space added because 100vw includes the width of the vertical scrollbar.

It quickly becomes apparent that both the header and the footer on the site have width set to 100vw:

But it is only the footer and not the header that is actually responsible for the scrollbar. It took me a little while to notice the max-width: 100% added in a different header class, which keeps the width of the header in check.

But what the hell is going on with the top margin of the footer? Why does the browser show a narrow band of empty white space between the window’s right border and the right border of the margin? It makes zero sense unless it’s a browser dev tools bug:


  • (no subject)

    com-petere со-ревновать-ся

  • (no subject)

    Someone is actually running a youtube ad campaign targeting React developers with a course on becoming a UI architect: The site that the ad…

  • (no subject)

    A beautiful cartoon on the front page of The Week:

  • Post a new comment


    default userpic
    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.