css两栏全屏布局学习

来源：互联网发布：suse yum 编辑：程序博客网时间：2024/06/04 19:39

见效果图：

代码：

<!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"></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>