Bottom div to expand according to screen resolution

<div class="main">
    <div cla开发者_如何学Pythonss="topContent">
         content goes here
    </div> 
</div>
<div class="footer">
</div>

My code is like this, I want the footer to expand as the resolution of the screen gets bigger. Is it possible?

My whole site should be above the fold always with no scroll and the footer should expand to fit the screen resolution.

If you want the footer to take the whole screen-height, don't use a height. If you want to use an other height according to your screen resolution, you'll need javascript/jquery

Give an id to the footer (example: footer) and try this:

<script type="text/javascript">
//Determine screen resolution
screenheight = screen.height;
d = document.getElementById('footer');
if (screenheight == 1024)
{
    d.style.height="500px";
}
else
{
    d.style.height="600px";
}
</script>

position:fixed;
left:0px;
right:0px;
height:5% /*you can change this to your wish*/

for the footer and if you dont want your content to be hidden behind the footer then:

position:fixed;
left:0px;
right:0px;
height:95% /*this will be 100 - height of footer*/

for another div that should hold your header and content inside of it

Percentage scale, works with relative to screen's resolutions, so you just have to specify the height as percentage.

#footer { height: 10%; }