【CSS】左侧定宽、右侧宽度自适应布局

又是一道前端的面试题，请实现页面布局，包括页头、内容区域、页脚三部分，其中内容区域为左右分栏，左栏定宽200px、右栏自适应宽度。

虽然是以前应用中碰到过的布局，但现场还是没写对，来重新做一下。

<!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>双列布局，左侧定宽，右侧自适应</title> <style> html,body{ height:100%; margin:0px; padding:0px; } #header { width:100%; height:20px; background:#CCC; } #footer { width:100%; height:20px; background:#CCC; } #main { padding-left: 200px; } #left { width:200px; height:200px; position:absolute; left:0; background:#FF0;} #middle { width:100%; height:200px; background:#F00; } </style> </head> <body> <div id="header">header</div> <div id="main"> <div id="left">left</div> <div id="middle">middle</div> </div> <div id="footer">footer</div> </body> </html>

提示：你可以先修改部分代码再运行。

知其然知其所以然，简单分析一下。页头、内容区域、页脚三块划分没什么好说的，主要是左右分栏。为保证右侧div能撑满右侧，需要设width:100%；左右的div需要在同一行上，而右侧div已经撑满一行了，于是左侧div的做法就是从文档流中分离，设置position:absolute；此时左右两个div发生重叠，需要将右侧div内容宽度减少200px并相应右移，给左侧div留出空间，设定main的padding-left:200px; 发现左侧div的内容也向右偏移了200px，需要左移回去，所以设置left:0。这样布局就完成了。

以上是中间区域双栏实现，现在改成左中右三栏的样式，代码如下：

<!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>双列布局，左侧定宽，右侧自适应</title> <style> html,body{ height:100%; margin:0px; padding:0px; } #header { width:100%; height:20px; background:#CCC; } #footer { width:100%; height:20px; background:#CCC; } #main { padding-left: 200px; padding-right: 200px;} #left { width:200px; height:200px; position:absolute; left:0; background:#FF0;} #right { width:200px; height:200px; position:absolute; right:0; background:#FF0; float:left;} #middle { width:100%; height:200px; background:#F00; float:left;} </style> </head> <body> <div id="header">header</div> <div id="main"> <div id="left">left</div> <div id="middle">middle</div> <div id="right">right</div> </div> <div id="footer">footer</div> </body> <html>

提示：你可以先修改部分代码再运行。

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自枫芸志，原文地址《【CSS】左侧定宽、右侧宽度自适应布局》

标签： CSS

已经有5 条评论抢在你前面了~

沙发
hhb 2014年3月23日上午12:02

三分栏中footer被覆盖了~

[回复]
板凳
咖啡小冰 2011年8月12日下午4:18

第一段中的main style我都写在middle中了，footer加了个float：left

[回复]
晴枫 8月 14th, 2011 下午11:32 回复:
@咖啡小冰, 但你把#left的background删掉会发现，你修改后main的背景色也出现在了left上

[回复]
地板
凡尘飞扬 2011年6月15日下午1:13

貌似看见过

[回复]
晴枫 6月 16th, 2011 下午4:12 回复:
@凡尘飞扬, 类似的估计不少，自己写写还是不一样

[回复]

枫芸志

枫芸志

【CSS】左侧定宽、右侧宽度自适应布局

已经有5 条评论抢在你前面了~

点击这里取消回复。