非全屏宽度父级的子元素的全屏宽度

Question

This question builds upon that one , where in order to apply full screen width to a child of a non full width parent element, the following rule is used on the child element:

width: 100vw;
margin-left: calc(-50vw + 50%);

As shown in this Fiddle , this solution doesn't work in the presence of a vertical scrollbar though: 100vw doesn't take the scrollbar into account and hence the child element ends up being wider than the screen (note: works perfectly without scrollbar).

Is there a way to solve this problem so that the child element takes exactly full screen width? If not in pure CSS then with JS?

Note: an overflow rule on body isn't acceptable in my case as I need the child to fill the exact width of the screen.

Answer 1

https://jsfiddle.net/k3nvkL35/4/

One of the issues you'll come across with the solution here is that I believe scrollbar widths are not universal, and so you may need to implement some conditional logic to affect width/margin based on that.

That being said, you may find this useful. The function below will check to see if the document has a vertical scrollbar by comparing the document's height to the window's height. Based on the existence of said scrollbar, it will modify the child's width and margins to fit the window.

Again, it likely requires tweaking, though it should provide a decent foundation.

 function adjustWidth() { if ($(document).height() > $(window).height()) { $(".child").css({ "width": "calc(100vw - 18px)", "margin-left": "calc(-50vw + 50% + 9px)" }); } else { $(".child").css({ "width": "", "margin-left": "" }) } } $(window).resize(adjustWidth).trigger("resize"); 

 .parent { width: 500px; height: 500px; margin: 0 auto; border: 3px solid green; } .child { height: 100px; background: red; width: 100vw; margin-left: calc(-50vw + 50%); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> <div class="child"> content </div> </div> 

Answer 2

Simple. Since the parent isn't positioned in any way, then the child can be positioned absolutely. No messing with calc or otherwise, works everywhere.

.child {
  height: 100px;
  background: red;
  position:absolute;
  left:0;
  right:0;
}

Here is a working fiddle: https://jsfiddle.net/vgbr6qw2/

Answer 3

I found this solution, which was sourced by this guy, but I don't know who originally did it. I haven't fully tested it, so it may not work in all browsers. I know the vw unit isn't supported in IE8, as if anyone cares.

 body { margin:0; } .wrapper { width:100%; max-width:400px; margin:0 auto; background:pink; /* margin is for display purposes on stack overflows fullscreen snippet view */ margin-top:80px; } .full-width { width:100vw; margin-left:-50vw; left:50%; background:red; position:relative; color:white; } 

 <div class="wrapper"> <span>Hi. I'm a paragraph.</span> <div class="full-width"> <p>You aint no paragraph, sucka!</p> </div> <strong>Be quiet, you weak losers.</strong> </div>