I'm having trouble figuring out how to create a 4px inset box shadow border that surrounds all of the content. Currently, the box shadow fills the window perfectly (as shown in the fiddle below), but my fixed navigation bar at the top ends up above the box shadow. Moving it below wouldn't work either, as the shadow would scroll upwards and leave the navigation without a top border.
jsFiddle: http://jsfiddle.net/neal_fletcher/WHP3M/2/
HTML:
<div class="test">
<div class="header">
<span class="header-link">LINK</span>
</div>
<div class="container">This is Content
<br/>This is Content
<br/>This is Content
<br/>This is Content
<br/>This is Content
</div>
</div>
CSS:
html {
height: 100%;
}
.header {
position: fixed;
top: 0; left: 0;
width: 100%; height: 50px;
background-color: orange;
z-index: 2;
}
.header-link {
padding: 50px;
}
.test {
min-height: 100%;
box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 1.0);
-moz-box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 1.0);
-webkit-box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 1.0);
}
.container {
position: relative;
padding: 50px;
z-index: 1;
}
Is there a way to apply the box-shadow around all the content, including the .header div? Or perhaps add a box-shadow on the top, left, and right sides of the div to give the illusion of a border around the entire site? Any suggestions or solutions would be greatly appreciated!