100vw background in wrapped

by swed

HTML

<body>
  <div class="wrapped">
    <h1>100vw background in wrapped</h1>
    <div class="fullbg">
      some body text, images, etc here
    </div>
    <center>
    press the buttons below, for simulate long heigh page or  mobile/descktop browser with or without vertical scroll width
    <input type="button" class='switch' value="Toggle height"/>
    <input type="button" class='cssfix' value="CSS Fix in long height"/>
    <div class="info"></div>
    </center>
  </div>

</body>

CSS

html,
body {
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}

div {
  position: relative;
}

*,*:before,*:after {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.wrapped {
  width: 70%;
  /*  or 998px, as you wnat */
  margin: 0 auto;
  border: 1px dotted black;
}

.wrapped.h {
  height: 150vh;
}

.fullbg {
  height: 5em;
  text-align: center;
  border: 3px dotted yellow;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  font-size: 2em;
  color: yellow;
}

.fullbg:before {
  content: "this is pseudo background";
  text-align: right;
  font-size: 14px;
  color: #000;
  bottom: 0;
  display: block;
  background: rgba(85, 144, 169, 0.7);
  position: absolute;
  width: 100vw;
  right: 50%;
  margin-right: -50vw;
  top: 0;
  z-index: -1;
  border: 3px dotted blue;
}
.fullbg.cssfix:before{
  margin-right: calc( -50vw + 8px );
}

JavaScript

$(".switch").click(function() {
  $(".wrapped").toggleClass("h");
});

$(".cssfix").click(function() {
  $(".fullbg").toggleClass("cssfix");
})