Currently, I am facing a challenge with a page that has an inset box shadow on the body element. When there are absolute and relative positioned divs on the page that expand enough to generate a scrollbar, the box shadow is cut off even when the height is set to 100% or 100vh. Is there a method to ensure that the box shadow always extends across the entire page, regardless of the size of any div elements? It's interesting to note that the background does continue below the normal viewport.
I have experimented with various approaches such as adjusting the height and min-height properties on the html and body tags without success.
Here is a simplified example illustrating the issue: https://jsfiddle.net/6ay8rusf/1/
body{
margin: 0;
background-color:#333;
box-shadow: inset 0 0 35px rgba(0,0,0,0.3);
min-height: 100vh;
height: 100%;
}
.abs{
left: 50%;
top: 50px;
width: 50px;
height: 100vh;
position: absolute;
background-color: #fff;
margin-bottom: 20px;
}
My goal is to find a way for the inset shadow to span the entire page without being truncated at 100vh;