<!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推荐
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推荐