I encountered a small issue. I am trying to design my website so that it fills at least the full vertical resolution of the user. Here is my HTML code:
<div id="head"></div>
<div id="body"></div>
<div id="legs"></div>
And this is my CSS code:
html {
margin: 0;
padding: 0;
}
#head {
width: 100%;
height: 65px;
background-color: gold;
}
#body {
width: 80%;
height: 400px; /* This should adjust based on remaining height */
background-color: blue;
margin: 0 auto;
}
#legs {
width: 100%;
height: 20px;
background-color: gold;
}
You can view the live example on jsfiddle http://jsfiddle.net/QgfJ3/embedded/result/. In the example, #head is 65px high and #legs is 20px high. The challenge lies in making #body's height expand based on the user's resolution. For instance, if a user has an 800x600 resolution, it utilizes 65px from #head and 20px from #legs, totaling 85px. There would be 715px remaining, so how can we dynamically set this height for #body?