June 17, 2011
Bottom div to expand according to screen resolution
Question by weblearner
<div class="main">
<div class="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.
Answer by RubenHerman
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>
Answer by Starx
Percentage scale, works with relative to screen’s resolutions, so you just have to specify the height as percentage.
#footer { height: 10%; }
