扩展前一篇“上中下三栏布局”,中间栏划分成两列,一列宽度固定,一列宽度随浏览器窗口宽度的变化而变化。固定宽度列定义为#side,可分为左侧布局和右侧布局,分别实现如下:
1-2-1左侧固定宽度布局
<!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=utf-8" /> <title>1-2-1左侧固定宽度布局</title> <style type="text/css"> html, body, .container {margin:0;padding:0;height: 100%;text-align:center;} body > .container {height: auto; min-height: 100%;} #main {height: 100%;padding-bottom: 35px;} /* 必须使用和footer相同的高度 */ .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;font-size: 0;} .clearfix{display:inline-block} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} #contentWrap {float: left;width: 100%;height:100%;} #content {margin-left: 300px;} #side{float:left;margin-left:-100%;height:100%;position:relative;width: 300px;} #footer{height: 35px;line-height: 35px;text-align: center;position:relative; margin-top: -35px;clear:both;} #header{height:90px;background-color:#666666;} #content{background-color:#888888;} #side{background-color:#777777;} #footer{background-color:#999999;} </style> </head> <body> <div class="container"> <!-- 头部 --> <div id="header">header</div> <div id="main" class="clearfix"> <div id="contentWrap"> <div id="content">content</div> </div> <div id="side">side</div> </div> </div> <!-- 底部 --> <div id="footer">footer</div> </body> </html>
1-2-1右侧固定宽度布局
<!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=utf-8" /> <title>1-2-1右侧固定宽度布局</title> <style type="text/css"> html, body, .container {margin:0;padding:0;height: 100%;text-align:center;} body > .container {height: auto; min-height: 100%;} #main {height: 100%;padding-bottom: 35px;} /* 必须使用和footer相同的高度 */ .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;font-size: 0;} .clearfix{display:inline-block} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} #contentWrap {margin-left: -300px;float: left;width: 100%;} #content {margin-left: 300px;} #side {float: right;width: 300px;} #footer{height: 35px;line-height: 35px;text-align: center;position:relative; margin-top: -35px;clear:both;} #header{height:90px;background-color:#666666;} #content{background-color:#888888;} #side{background-color:#777777;} #footer{background-color:#999999;} </style> </head> <body> <div class="container"> <!-- 头部 --> <div id="header">header</div> <div id="main" class="clearfix"> <div id="contentWrap"> <div id="content">content</div> </div> <div id="side">side</div> </div> </div> <!-- 底部 --> <div id="footer">footer</div> </body> </html>