html怎么设置左侧区域宽度,【CSS】左侧定宽、右侧宽度自适应布局

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

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

双列布局，左侧定宽，右侧自适应

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; }

header

left

middle

footer

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

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

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

双列布局，左侧定宽，右侧自适应

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;}

header

left

middle

right

footer

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

本博客所有文章如无特别注明均为原创。