3

some times in wrapped by width div needs to set for an element background to full width, so I set it in an pseudo element, but descktop browser, when page is long height adds 16px for vertical scrooll bar to viewport, so I calculate it by calc (see below).

Here is Example

HTML:

<div class="wrapped">
 <h1>100vw background in wrapped</h1>
 <div class="fullbg">
  some body text, images, etc here
 </div>
</div>

CSS

html, body {    margin: 0;      padding: 0;    }
body {     height: 100%;     width: 100%;    }
div {      position: relative;   }
*,*:before,*:after {      box-sizing: border-box;
 -moz-box-sizing: border-box;     -webkit-box-sizing: border-box;
}

.wrapped {
 width: 70%;
 margin: 0 auto;
 height: 150vh; /* simulate long heigh */
}
.fullbg {
 height: 5em;
/* some styles here*/
}

.fullbg:before {
 content: "";
 bottom: 0;
 display: block;
 background: rgba(85, 144, 169, 0.7);
 position: absolute;
 width: 100vw;
 right: 50%;
 margin-right: -50vw;                /* work for short page or mobile browser*/
 margin-right: calc( -50vw + 8px );  /* work for desctop long page  */ 
 top: 0;
 z-index: -1;
}

I looked answer at

and others questions, but do not find real true universal css solution for this

as a temporary solution may be an js, like this:

var scrollbarWidth = ($(document).width() - window.innerWidth);

but I think it not the best solution, and now I not figured out how to use it with a pseudo considering that to scroll width can vary.

ps. no one overflow: hidden!

Community
  • 1
  • 1
MrSwed
  • 559
  • 8
  • 15
  • 1
    Good question. I thought the "cssfix" fixed things by making the width allow for the width of the vertical scrollbar, but of course 8px wouldn't be enough to make that happen! Let's see what answers you get. – Mr Lister Aug 05 '16 at 09:09

1 Answers1

0

The scrollbar can be targeted specifically.

Check this out for the fix in chrome and safari

http://codepen.io/anon/pen/dXgmbZ

Key CSS:

.element::-webkit-scrollbar { 
width: 0 !important;
}`

The codepen is just your example with the chrome fix. If you'd like to see a more robust solution, check out this JSFiddle:
http://jsfiddle.net/E78q3/

The idea behind this is just clipping out the scroll bar with absolute positioning and hiding container/wrapper overflow. Simple, clever, yet effective.

Further Reading:
https://blogs.msdn.microsoft.com/kurlak/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari/

MassDebates
  • 917
  • 6
  • 10