<!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>2列右侧固定左侧自适应宽度，未知高度且底部平齐+头部+导航+尾部——<a href="http://www.aa25.cn">标准之路www.aa25.cn</a></title>
<link href="layout.css" rel="stylesheet" type="text/css" />
<meta name="Keywords" content="标准之路,www.aa25.cn,网页标准布局,DIV+CSS" />
<meta name="" content="标准之路,www.aa25.cn,网页标准布局,DIV+CSS" />
<meta name="author" content"×××,有问题请到www.68css.cn网站留言" />
<meta name="Description" content="本套网页标准布局模板是由标准之路（www.aa25.cn）制作完成，如果您要转载，请保留版权" />
</head>
<body>
<div id="container">
<div id="header">This is the Header</div>
<br class="clearfloat" />
<div id="menu">This is the Menu</div>
<br class="clearfloat" />
<div id="mainContent">
<div id="sidebar">This is the sidebar<br />
</div>
<div id="content">2列右侧固定左侧自适应宽度，未知高度且底部平齐+头部+导航+尾部——<a href="http://www.aa25.cn">标准之路www.aa25.cn</a><br />
<br />
本例和例21差不多，一个是固定宽度，一个是自适应，同样是未知高度。<br />
<br />
此例中需要说明一点的是：当content设定高度后，3像素会跑到content外侧，反之，在content内部。这样，我们用!important修正在ie下向左多浮动2像素，加上3像素的bug正好是5像素，所以在火狐和IE下显示是一样的，这是大家必须注意的一点。而当content设定高度后，如100px，那么在IE6下，当高度超过100px时，它会自动把conent撑高，而火狐去不会。所以用!important修正在IE下设定高度值使它的3像素跑到外侧，火狐下因不存在3像素问题，所以高度自动。<br />
<br />
<br />
总之，实现的方法是多种多样的，这只是本人在学习过程中总结的一点经验，权当抛砖引玉，希望能对您有所帮助，当然您有更好的办法和布局，欢迎一块来学习，交流，让web标准在中国得到更好的发展。同时希望您继续关注标准之路(www.aa25.cn)<br />
<br />
如果您要实现未知高度底部平齐，请参考23例<br />
</div>
</div>
<br class="clearfloat" />
<div id="footer">This is the footer<span style="display:none"><script language="javascript" type="text/javascript" src="http://js.users.51.la/1967272.js"></script></span></div>
</div>
</body>
</html>
css
body { font-family:Verdana; font-size:14px; margin:0;}
#container {margin:0 auto; width:100%;}
#header { height:100px; background:#9c6; margin-bottom:5px;}
#menu { height:30px; background:#693; margin-bottom:5px;}
#mainContent { background:url(bg.gif) right 0 repeat-y; overflow:auto;zoom:1; margin-bottom:5px;}
#sidebar { float:right; width:200px;background:#cf9;}
#content { margin-right:205px !important; margin-right:202px; height:auto !important; height:100px; background:#ffa;}
#footer { height:60px; background:#9c6;}
.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px;}
已有 0 人发表留言，猛击->>这里<<-参与讨论
ITeye推荐