<!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列右側(cè)固定左側(cè)自適應(yīng)寬度，未知高度且底部平齊+頭部+導(dǎo)航+尾部——<a >標(biāo)準(zhǔn)之路www.aa25.cn</a></title>
<link href="layout.css" rel="stylesheet" type="text/css" />
<meta name="Keywords" content="標(biāo)準(zhǔn)之路,www.aa25.cn,網(wǎng)頁(yè)標(biāo)準(zhǔn)布局,DIV+CSS" />
<meta name="" content="標(biāo)準(zhǔn)之路,www.aa25.cn,網(wǎng)頁(yè)標(biāo)準(zhǔn)布局,DIV+CSS" />
<meta name="author" content"×××,有問題請(qǐng)到www.68css.cn網(wǎng)站留言" />
<meta name="Description" content="本套網(wǎng)頁(yè)標(biāo)準(zhǔn)布局模板是由標(biāo)準(zhǔn)之路（www.aa25.cn）制作完成，如果您要轉(zhuǎn)載，請(qǐng)保留版權(quán)" />
</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列右側(cè)固定左側(cè)自適應(yīng)寬度，未知高度且底部平齊+頭部+導(dǎo)航+尾部——<a >標(biāo)準(zhǔn)之路www.aa25.cn</a><br />
<br />
本例和例21差不多，一個(gè)是固定寬度，一個(gè)是自適應(yīng)，同樣是未知高度。<br />
<br />
此例中需要說明一點(diǎn)的是：當(dāng)content設(shè)定高度后，3像素會(huì)跑到content外側(cè)，反之，在content內(nèi)部。這樣，我們用!important修正在ie下向左多浮動(dòng)2像素，加上3像素的bug正好是5像素，所以在火狐和IE下顯示是一樣的，這是大家必須注意的一點(diǎn)。而當(dāng)content設(shè)定高度后，如100px，那么在IE6下，當(dāng)高度超過100px時(shí)，它會(huì)自動(dòng)把conent撐高，而火狐去不會(huì)。所以用!important修正在IE下設(shè)定高度值使它的3像素跑到外側(cè)，火狐下因不存在3像素問題，所以高度自動(dòng)。<br />
<br />
<br />
總之，實(shí)現(xiàn)的方法是多種多樣的，這只是本人在學(xué)習(xí)過程中總結(jié)的一點(diǎn)經(jīng)驗(yàn)，權(quán)當(dāng)拋磚引玉，希望能對(duì)您有所幫助，當(dāng)然您有更好的辦法和布局，歡迎一塊來學(xué)習(xí)，交流，讓web標(biāo)準(zhǔn)在中國(guó)得到更好的發(fā)展。同時(shí)希望您繼續(xù)關(guān)注標(biāo)準(zhǔn)之路(www.aa25.cn)<br />
<br />
如果您要實(shí)現(xiàn)未知高度底部平齊，請(qǐng)參考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 人發(fā)表留言，猛擊->>這里<<-參與討論
ITeye推薦