Some help involving CSS and HTML5 page that i have created. - css

Question

I have created a page that is some very simple text images and a video. I have then put this content into a div(div innver), this div(div innver) has a white background. This Div(div innver) is then inside another div(div outer). Div(div outer) has a back ground colour of blue. for some reason div(div innver)'s background colour does not go the entire length of the page.
This is a link to a page that allows you to see my problem.
http://cssdeck.com/labs/bhppooft
What i am wanting is the white background to be the entire height of the page, not just the top.

Answer 1

Your inner div is absolutely positioned and has a fixed height of 100%. This results in a white box of exactly the same height as the viewport.

Answer 2

Check this one
I removed your absolute position of the div, it was causing the issue.
For the explanation, like #Paul said below :
Your inner div is absolutely positioned and has a fixed height of
100%. This results in a white box of exactly the same height as the
viewport.
EDIT after your comment :
You want the white div to be stick to the top and the bottom, see this fiddle
body { margin: 0;}
p:last-child { margin-bottom: 0; }
Be careful about margin and padding of your elements. The fix I've made works in the present case but couldn't work if you add others elements after the last p tag.
Also, make sure to close tags you are opening and respects the order of these (I didn't correct all tags in the JSFiddle)
Finally, you can use CSS stylesheets to clarify your HTML code :)

Answer 3

Just Remove both
Position: absolute;
Height:100%;
from the inner div then your problem will solved.
Wrong code
----------------xxx ------------
background-color: white;
bottom: 0;
font-size: 20px;
height: 100%;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
text-align: justify;
top: 0;
width: 80%;
z-index: -1;
---------------- xxxx -------------
Right code
----------------xxx ------------
background-color: white;
bottom: 0;
font-size: 20px;
left: 0;
margin: 0 auto;
right: 0;
text-align: justify;
top: 0;
width: 80%;
z-index: -1;
---------------- xxxx -------------