布局特点:
顶部固定、导航菜单固定、底部永远处于页面底部。
代码如下:
<! DOCTYPE html> < html > < head > < title ></ title > < meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> < style type="text/css"> html, body { padding:0; margin:0; height:100%; position:relative; } #divHeader { background-color:rgba(200,200,200,0.95); *background-color:#ddd; position:fixed; width:100%; height:50px; top:0px; outline:solid 5px rgba(200,200,200,0.6); } #divMain { padding-top:60px; padding-bottom:60px; padding-left:100px; background-color:white; _padding-top:10px; _padding-bottom:10px; } #divFooter { background-color:#ddd; position:absolute; width:100%; height:50px; bottom:0px; _position:; } #divNav { width:90px; position:fixed; left:0px; top:60px; bottom:60px; overflow:auto; _position:absolute; } #divNav a { display:block; padding:3px; margin:0 3px; background-color:#eee; } #divNav a:hover { background-color:#aaa; } </ style > < script type="text/javascript"> function addContent() { for (var i = 0; i < 10 ; i++) { document.getElementById('divMain').innerHTML += 'CONTENT<br />'; } } function resetContent() { document.getElementById('divMain').innerHTML = ''; } </ script > </ head > < body style="background-color:#fff;"> < div style="position:relative; min-height:100%;"> < div id="divNav"> < a href="#">菜单1</ a > < a href="#">菜单1</ a > < a href="#">菜单1</ a > < a href="#">菜单1</ a > < a href="#">菜单1</ a > < a href="#">菜单1</ a > < a href="#">菜单1</ a > < a href="#">菜单1</ a > < a href="#">菜单1</ a > < a href="#">菜单1</ a > </ div > < div id="divHeader"> divHeader < input type="button" value="add content" onclick="addContent();" /> < input type="button" value="reset content" onclick="resetContent();" /> </ div > < div id="divMain"> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> CONTENT< br /> < div > haha </ div > </ div > < div id="divFooter"> divFooter< br /> divFooter< br /> </ div > </ div > </ body > </ html > |
欢迎转载,转载请注明:转载自[ http://www.cnblogs.com/zjfree/ ]
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步