Search code examples
htmlioscssviewportbanner

Full Width Banner that Doesn't Affect Viewport Size

I've been battling with this simple issue for a while and I'm looking for some help...

I'm trying to make a full width colour banner that spans the full width of the page, but doesn't in any way affect the browser viewport sizing. I want it to be visible to human eyes, but I don't want it to affect the size/location of the browser's start view or scrolling behavior... just like it's not really there.

I also want to be able to place the banner in-line in the HTML.

Here is my test page: http://www.tanatu.com/widthtest

  • The Green Banner works perfectly, but it's y-location is defined in CSS (which is a pain)

  • The Pink Banner is my best guess so far, and works as intended on Chrome, but not on Safari on iOS, where the viewport is skewed to one side

Safari iOS Positioning Issue

Correct Positioning

I've been playing with this for months so any help would be MASSIVELY appreciated! :0)

Thanks!

Solution

  • Because you are trying to break out of your parent container that is where your challenge is. You can do this a few ways but I think the easiest without completely changing your markup would be to use a combination of viewport width units and calc()

    If you change these attributes on #widthtest4 it should work:

    #widthtest4 {
  width: 100vw;
  margin-left: calc(-50vw + 426px);
}