css| Self Adaptation
To achieve the head foot fixed, the middle area with the content is highly adaptive, drag the scroll bar foot forever bottom.
Solardreamstudios 's plan gave me a very good idea, but the key part is original, always thought that will be better than the Solardreamstudios scheme, the results of a careful look at their code, only to find that in fact the principle is almost, But they seem to be doing more with compatibility, not testing.
A. Width 100% Adaptive
Structure code
<body>
<div id= "Head" >head</div>
<div id= "Head_height" ></div>
<div id= "Middle" ></div>
<div id= "Foot_height" ></div>
<div id= "Foot" >foot</div>
</body>
Performance code
#head {width:100% text-align:center; background: #FF9400; height:100px; position:absolute; top:0;}
#head_height {height:100px;}
#middle {margin:20px;}
#foot {width:100% text-align:center; background: #f00; height:100px; position:absolute; bottom:0;}
* HTML #foot {bottom:-1px;}
#foot_height {height:100px;}
B. Width Fixed center
Structure code
<body>
<div id= "Head" >
<div id= "Head_content" >head</div>
</div>
<div id= "Head_height" ></div>
<div id= "Middle" ></div>
<div id= "Foot_height" ></div>
<div id= "Foot" >
<div id= "Foot_content" >foot</div>
</div>
</body>
Performance code
#head {width:100%; text-align:center; position:absolute; top:0; left:0;}
#head_content {line-height:100px width:700px; margin:0 auto; background: #FF9400; height:100px;}
#head_height {height:100px;}
#middle {margin:20px;}
#foot {width:100%; text-align:center; position:absolute; bottom:0;}
* HTML #foot {bottom:-1px;}
#foot_content {line-height:100px width:700px; margin:0 auto; background: #f00; height:100px;}
#foot_height {height:100px;}
Test environment IE6.0 and FF1.5,IE environment because bugs sometimes automatically appear as scrollbars (the Solardreamstudios scheme), FF is the perfect effect.
