Theres gap between my footer and page end

On those pages you don’t have enough content to fill out the height of the page, so the footer ends before the browser window.

You could try setting a min-height on the #posts column:

#posts {
min-height: 600px;
}

That way if the content isn’t enough to push the footer to the bottom, the div will make up the difference. You may have to adjust this depending on what screen resolutions you need to accommodate.

I tried it but there so much unnecessary space now on the posts. There isn’t another way?

An alternative would be to close the .pattern div BEFORE your footer, then set the background color of the body tag to black. That way it will appear as though the footer continues down the page. The height of the footer would then vary depending on the screen resolution.