I am looking to design a full-screen CSS layout with specific requirements.
<div id="divLeft">LEFT is ok</div>
<div id="divRight">
<div id="divTop">TOP is ok</div>
<div id="divCenter">CENTER should have fluid height</div>
<div id="divBottom">BOTTOM should always be at the bottom</div>
</div>
CSS
html{
height:100%
}
body{
height:100%
}
#divLeft{
float:left;
width:70px;
height:100%;
background:#6c9;
}
#divRight{
margin-left:70px;
height:100%;
background:#999;
color:#fff;
}
#divTop{
background:red;
text-align:right;
}
#divCenter{
background:blue;
text-align:center;
}
#divBottom{
background:green;
text-align:center;
}
Check out this jsfiddle for reference
The issue lies with #divCenter (needing fluid height) and #divBottom (required to stay at the bottom of the screen).