<!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 >標準之路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 >標準之路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推薦