<!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推薦
winver-檢查Windows版本
?
wmimgmt.msc打開windows管理體系結構(WMI)
?
wupdmgrwindows更新程序
?
wscriptwindows腳本宿主設置
?
write寫字板
?
winmsd-系統信息
?
wiaacmgr-掃描儀和照相機向導
?
winchatXP自帶局域網聊天
?
mem.exe顯示內存使用情況
?
Msconfig.exe-系統配置實用程序
?
mplayer2-簡易widnows media player
?
mspaint畫圖板
?
mstsc遠程桌面連接
?
mplayer2-媒體播放機
?
magnify放大鏡實用程序
?
mmc打開控制臺
?
mobsync同步命令
?
dxdiag-檢查DirectX信息
?
drwtsn32 系統醫生
?
devmgmt.msc- 設備管理器
?
dfrg.msc-磁盤碎片整理程序
?
diskmgmt.msc-磁盤管理實用程序
?
dcomcnfg-打開系統組件服務
?
ddeshare-打開DDE共享設置
?
dvdplayDVD播放器
?
net stop messenger-停止信使服務
?
net start messenger開始信使服務
?
notepad打開記事本
?
nslookup-網絡管理的工具向導
?
ntbackup-系統備份和還原
?
narrator-屏幕“講述人”
?
ntmsmgr.msc移動存儲管理器
?
ntmsoprq.msc-移動存儲管理員操作請求
?
netstat -an(TC)命令檢查接口
?
syncapp創建一個公文包
?
sysedit系統配置編輯器
?
sigverif-文件簽名驗證程序
?
sndrec32-錄音機
?
shrpubw創建共享文件夾
?
secpol.msc-本地安全策略
?
syskey-系統加密，一旦加密就不能解開，保護windows xp系統的雙重密碼
?
services.msc-本地服務設置
?
Sndvol32-音量控制程序
?
sfc.exe系統文件檢查器
?
sfc /scannow-windows文件保護
?
tsshutdn-60秒倒計時關機命令
?
tourstartxp簡介(安裝完成后出現的漫游xp程序)
?
taskmgr任務管理器
?
eventvwr-事件查看器
?
eudcedit-造字程序
?
explorer-打開資源管理器
?
packager-對象包裝程序
?
perfmon.msc計算機性能監測程序
?
progman程序管理器
?
regedit.exe注冊表
?
rsop.msc-組策略結果集
?
regedt32-注冊表編輯器
?
rononce -p 15秒關機
?
regsvr32 /u *.dll停止dll文件運行
?
regsvr32 /u zipfldr.dll取消ZIP支持
?
cmd.exeCMD命令提示符
?
chkdsk.exe-Chkdsk磁盤檢查
?
certmgr.msc證書管理實用程序
?
calc-啟動計算器
?
charmap啟動字符映射表
?
cliconfg-SQL SERVER 客戶端網絡實用程序
?
Clipbrd剪貼板查看器
?
conf-啟動netmeeting
?
compmgmt.msc-計算機管理
?
cleanmgr-垃圾整理
?
ciadv.msc索引服務程序
?
osk打開屏幕鍵盤
?
odbcad32-ODBC數據源管理器
?
oobe/msoobe /a檢查XP是否激活
?
lusrmgr.msc本機用戶和組
?
logoff-注銷命令
?
iexpress-木馬捆綁工具，系統自帶
?
Nslookup-IP地址偵測器
?
fsmgmt.msc-共享文件夾管理器
?
utilman輔助工具管理器
?
gpedit.msc-組策略
?
已有 0 人發表留言，猛擊->>這里<<-參與討論
ITeye推薦