Is it possible to make an inner div always have a width of the full browser window regardless of its parent/s width settings and dimensions?

Question

Is it possible to make an inner div always have a width of the full browser window regardless of its parent/s width settings and dimensions? I also want to make said div sit right on the left of the page, ie, left: 0 where zero is relative to the body element (not its parent div).

My playing around can make the inner div the correct width but the content below it moves up (doesn't sit underneath) and I still haven't figured out how to move the div left to 0.

And to make things harder; is it possible to do with CSS2 (not use CSS3)?

.full-page-width {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
}

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <p>I should sit above Foo</p>

            <div class="full-page-width">
                <p>Foo</p>
            </div>

            <p>I should always sit below Foo</p>
        </div>
    </div>
</div>

Answer 1

Yes, if you want you can set in 2 ways that I know of:

First is using vw and vh

div{
 width:100vw;//for width
 height:100vh;//for height
}

Other solution is using position

div{
 position fixed;
 left:0;//for width
 right:0;//for width
 top:0;//for height
 bottom:0;//for height
}

Answer 2

Simply use the view width unit:

div{
   width: 100 vw;
}

https://www.w3schools.com/cssref/css_units.asp

For positioning, you will have to place it outside the container or use a negative margin.

Answer 3

You can do it with position:fixed:

html, body {
  margin:0;
}
.container {
  background: linear-gradient(to bottom, lightgreen, green);
  height: 1000px;
  width:200px;
}

.inner {
  position:fixed;
  width: 100%;
  bottom: 0;
  height: 50px;
  background-color: lightblue;
}

<div class="container">
  <div class="inner"></div>
</div>