Pseudo element to cover 100% of body not match parent element

I'm trying to get a pseudo element to cover 100% of the body/page not grab the height from the parent it's based off.

So I have something like:

   <body>
       <accordion></accordion>
       <div> Lots of content that extends a bit </div>
   </body>

You can see this jsfiddle for an example of what I mean.

Basically, I want that shade to extend to the bottom of the page instead of just grabbing the parent's height.

I'm working on an angular project so that's why I'm little stuck with the markup and I need the parent item positioned absolute.

Solution

Use the following CSS for the shade to cover all the page.

	html {
		font-size: 100%;
	}
	* {
		margin: 0;
		padding: 0;
	}
	body {
		background-color: #F9F9F9;
		height: 100%;
		position: relative;
	}
	.container {
		
	}
	.accordion {
		left: 0;
		top: 0;
		width: 100%;
		height: 88px;
		background:red;
	}
	.accordion:after {
		content: '';
		position: absolute;
		background: rgba(0,0,0,.6);
		height: 100%;
		width: 100%;
		left: 0;
		top: 89px;
		visibility: visible;
		z-index: 10;
        overflow:visible;
	}

Change I made to your code is to remove position:absolute in accordion. Also remove padding or the container.