见效果图：
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <mce:style type="text/css"><!-- html,body{margin:0;padding:0} #container{} #header{} div#wrapper{float:right;width:100%;margin-left:-180px;} div#content{margin-left:180px;} div#navigation{float:left;width:180px;} div#footer{clear:both;width:100%} html,body{height:95%;} #container{height:100%;} #header{height:10%;min-height:60px;} #wrapper{height:80%;} #content{} #navigation{height:80%;} #footer{height:10%;min-height:40px;} body{background-color:#000;} #container{background-color:#eee;} #header{background-color:#9999dd;} #wrapper{background-color:#ddd;} #content{background-color:#aaa;} #navigation{background-color:#666;} #footer{background-color:#88aa88;} --></mce:style><style type="text/css" mce_bogus="1"> html,body{margin:0;padding:0} #container{} #header{} div#wrapper{float:right;width:100%;margin-left:-180px;} div#content{margin-left:180px;} div#navigation{float:left;width:180px;} div#footer{clear:both;width:100%} html,body{height:95%;} #container{height:100%;} #header{height:10%;min-height:60px;} #wrapper{height:80%;} #content{} #navigation{height:80%;} #footer{height:10%;min-height:40px;} body{background-color:#000;} #container{background-color:#eee;} #header{background-color:#9999dd;} #wrapper{background-color:#ddd;} #content{background-color:#aaa;} #navigation{background-color:#666;} #footer{background-color:#88aa88;}</style> </head> <body> <div id="container"> <div id="header">header</div> <div id="wrapper"> <div id="content">content</div> </div> <div id="navigation">side</div> <div id="footer">footer</div> </div> </body> </html>
博客园 © 2004-2026 浙公网安备 33010602011771号 浙ICP备2021040463号-3
浙公网安备 33010602011771号