0

I'm using the technique outlined here to make a child div 100% width of the browser when the parent is not: https://stackoverflow.com/a/24895631/1184180

This works more or less exactly how you'd want it to, except the implementation of the spec seems to be to add the scrollbar width to the viewport width. So when there is vertical scrolling, the child element is at 100vw + scrollbar width.

This in turn causes the dreaded Superfluous Horizontal Scrollbar to rear its head, which is something nobody wants, ever.

Given that it is due to the behaviour of the browser it seems unlikely there's much that can be done about this - however, I'm wondering if anyone has come up with a genius solution?

The best I can see thus far is setting the width to ~98vw and putting up with the child div background not quite being 100% in width. This does slightly offend my sensibilities, though :/

Community
  • 1
  • 1
rickibarnes
  • 187
  • 3
  • 16
  • Yes, there is a simple solution. Use `overflow-x:hidden` on the `body` I mention it in this Q& A - http://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen. – Paulie_D Feb 16 '16 at 10:13
  • It's also mentioned in other answers to the question you linked. – Paulie_D Feb 16 '16 at 10:41
  • Ah sorry, forgot to mention that doesn't work for me. It is the first thing I tried. – rickibarnes Feb 17 '16 at 02:50
  • Then I would suggest you make a demo of your actual issue. – Paulie_D Feb 17 '16 at 07:17
  • Just trying to work out how to do a cut down version of my project. Hopefully I run across the root of the issue as I'm doing it. – rickibarnes Feb 18 '16 at 02:01
  • Aaaargh OK, found it - there was a declaration of `body { display: table;}` tucked away in a media query. Didn't seem to make any difference at all, _apart from_ breaking the `overflow-x:hidden`. Working with inherited code, so much fun :O – rickibarnes Feb 18 '16 at 02:41

0 Answers0