Content Container To Fit Screensize?

If got a very basic layout, with a header, content container and a footer. What i need done, is to make my content container size up, so that the whole layout will fit on the scree

Solution 1:

I think this what you need (the footer will be always sticked to the bottom)

CSS

html, body {
    margin:0;
    padding:0;
    height:100%;
}
.page {
    min-height:100%;
    position:relative;
}
.header {
    background:#00ff0f;
    padding:30px;
}
.content{
    padding:10px;
    padding-bottom:45px;   /* Height+padding(top and botton) of the footer */
    text-align:justify; 
 }
.footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:15px;   /* Height of the footer */
    background:#00ff0f;
    padding:10px 0; /*paddingtop+bottom 20*/
}

.content {
    height:100%; // IE HACK
}

HTML

<div class="page">
    <div class="header">Header</div>
    <div class="content">
        Some Content Here...
    </div>
    <div class="footer">Footer</div>
</div>​

Tested in all major browsers. DEMO.

​

Solution 2:

What you really want is a sticky footer, no? You can style the other elements to give the illusion that the #content element is bigger than it really is.

http://ryanfait.com/sticky-footer/