Issues with clearfix

Question

I have created a html and can be found http://temp87.web44.net/temp.html. Problem what i'm facing is there is a gray strip at the bottom of page after footer and the page is not occupying 100% of browser.

CSS which is causing the issue..

.clearfix:after {
    content: ".";   //If this is commented out the page fits in perfectly, but the background of <div>storyWrapper clearfix</div> goes off.
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Problem 2: Also i want the height of

<div class="detailsContent"/> 

to fit automatically according to the resolution of the screen. Right now computed height is always 619px and in large monitors the whole page occupies only 75% of the screen.

Answer 1

Remove "." from content. write like this:

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}