[常用布局]左栏固定宽度，右栏自适应的两种纯CSS方法

标签： 布局 宽度 适应 | 发表时间：2013-08-26 14:01 | 作者：蓝飞
出处：http://www.clanfei.com/

其一，左栏固定宽度，右栏自适应之绝对定位法：

  
       
  1. <!doctype html>

    2.    
  2. <html lang="zh-CN">

    3.    
  3. <head>

    4.    
  4. 	<meta charset="UTF-8">

    5.    
  5. 	<title>左栏固定宽度，右栏自适应之绝对定位法</title>

    6.    
  6. 	<style type="text/css">

    7.    
  7. 	body{

    8.    
  8. 		margin: 0;

    9.    
  9. 	}

    10.    
  10. 	#nav{

    11.    
  11. 		top: 0;

    12.    
  12. 		left: 0;

    13.    
  13. 		width: 230px;

    14.    
  14. 		height: 600px;

    15.    
  15. 		background: #ccc;

    16.    
  16. 		position: absolute;

    17.    
  17. 	}

    18.    
  18. 	#main{

    19.    
  19. 		height: 600px;

    20.    
  20. 		margin-left: 230px;

    21.    
  21. 		background: #0099ff;

    22.    
  22. 	}

    23.    
  23. 	</style>

    24.    
  24. </head>

    25.    
  25. <body>

    26.    
  26. 	<div id="container">

    27.    
  27. 		<div id="nav">

    28.    
  28. 			左栏

    29.    
  29. 		</div>

    30.    
  30. 		<div id="main">

    31.    
  31. 			右栏

    32.    
  32. 		</div>

    33.    
  33. 	</div>

    34.    
  34. </body>

    35.    
  35. </html>

看起来很美好，但是。。

由于左栏使用绝对定位，脱离了文档流，因此有一个缺陷，即当左栏高度大于右栏时，无法将container撑开，这个缺陷单单只看两栏布局并没有太大影响，但如果两栏布局下面有一个底栏，就会出现底栏与左栏重叠的情况：

  
       
  1. <!doctype html>

    2.    
  2. <html lang="zh-CN">

    3.    
  3. <head>

    4.    
  4. 	<meta charset="UTF-8">

    5.    
  5. 	<title>左栏固定宽度，右栏自适应之绝对定位法</title>

    6.    
  6. 	<style type="text/css">

    7.    
  7. 	body{

    8.    
  8. 		margin: 0;

    9.    
  9. 	}

    10.    
  10. 	#nav{

    11.    
  11. 		top: 0;

    12.    
  12. 		left: 0;

    13.    
  13. 		width: 230px;

    14.    
  14. 		height: 600px;

    15.    
  15. 		background: #ccc;

    16.    
  16. 		position: absolute;

    17.    
  17. 	}

    18.    
  18. 	#main{

    19.    
  19. 		height: 400px;

    20.    
  20. 		margin-left: 230px;

    21.    
  21. 		background: #0099ff;

    22.    
  22. 	}

    23.    
  23. 	#footer{

    24.    
  24. 		text-align: center;

    25.    
  25. 		background: #009000;

    26.    
  26. 	}

    27.    
  27. 	</style>

    28.    
  28. </head>

    29.    
  29. <body>

    30.    
  30. 	<div id="container">

    31.    
  31. 		<div id="nav">

    32.    
  32. 			左栏

    33.    
  33. 		</div>

    34.    
  34. 		<div id="main">

    35.    
  35. 			右栏

    36.    
  36. 		</div>

    37.    
  37. 	</div>

    38.    
  38. 	<div id="footer">

    39.    
  39. 		底栏

    40.    
  40. 	</div>

    41.    
  41. </body>

    42.    
  42. </html>

我们再来看看第二种方法，左栏固定宽度，右栏自适应之负margin法：

  
       
  1. <!doctype html>

    2.    
  2. <html lang="zh-CN">

    3.    
  3. <head>

    4.    
  4. 	<meta charset="UTF-8">

    5.    
  5. 	<title>左栏固定宽度，右栏自适应之负margin法</title>

    6.    
  6. 	<style type="text/css">

    7.    
  7. 	body{

    8.    
  8. 		margin: 0;

    9.    
  9. 	}

    10.    
  10. 	#container{

    11.    
  11. 		margin-left: 230px;

    12.    
  12. 		_zoom: 1;

    13.    
  13. 		/*兼容IE6下左栏消失问题*/

    14.    
  14. 	}

    15.    
  15. 	#nav{

    16.    
  16. 		float: left;

    17.    
  17. 		width: 230px;

    18.    
  18. 		height: 600px;

    19.    
  19. 		background: #ccc;

    20.    
  20. 		margin-left: -230px;

    21.    
  21. 		position: relative;

    22.    
  22. 		/*兼容IE6下左栏消失问题，IE6真不让人省心啊>_<*/

    23.    
  23. 	}

    24.    
  24. 	#main{

    25.    
  25. 		height: 600px;

    26.    
  26. 		background: #0099ff;

    27.    
  27. 	}

    28.    
  28. 	</style>

    29.    
  29. </head>

    30.    
  30. <body>

    31.    
  31. 	<div id="container">

    32.    
  32. 		<div id="nav">

    33.    
  33. 			左栏

    34.    
  34. 		</div>

    35.    
  35. 		<div id="main">

    36.    
  36. 			右栏

    37.    
  37. 		</div>

    38.    
  38. 	</div>

    39.    
  39. </body>

    40.    
  40. </html>

这样无论两栏的高度如何变化都不会有问题了：

  
       
  1. <!doctype html>

    2.    
  2. <html lang="zh-CN">

    3.    
  3. <head>

    4.    
  4. 	<meta charset="UTF-8">

    5.    
  5. 	<title>左栏固定宽度，右栏自适应之负margin法</title>

    6.    
  6. 	<style type="text/css">

    7.    
  7. 	body{

    8.    
  8. 		margin: 0;

    9.    
  9. 	}

    10.    
  10. 	#container{

    11.    
  11. 		margin-left: 230px;

    12.    
  12. 		_zoom: 1;

    13.    
  13. 		/*兼容IE6下左栏消失问题*/

    14.    
  14. 	}

    15.    
  15. 	#nav{

    16.    
  16. 		float: left;

    17.    
  17. 		width: 230px;

    18.    
  18. 		height: 600px;

    19.    
  19. 		background: #ccc;

    20.    
  20. 		margin-left: -230px;

    21.    
  21. 		position: relative;

    22.    
  22. 		/*兼容IE6下左栏消失问题，IE6真不让人省心啊>_<*/

    23.    
  23. 	}

    24.    
  24. 	#main{

    25.    
  25. 		height: 400px;

    26.    
  26. 		background: #0099ff;

    27.    
  27. 	}

    28.    
  28. 	#footer{

    29.    
  29. 		clear: both;

    30.    
  30. 		text-align: center;

    31.    
  31. 		background: #009000;

    32.    
  32. 	}

    33.    
  33. 	</style>

    34.    
  34. </head>

    35.    
  35. <body>

    36.    
  36. 	<div id="container">

    37.    
  37. 		<div id="nav">

    38.    
  38. 			左栏

    39.    
  39. 		</div>

    40.    
  40. 		<div id="main">

    41.    
  41. 			右栏

    42.    
  42. 		</div>

    43.    
  43. 	</div>

    44.    
  44. 	<div id="footer">

    45.    
  45. 		底栏

    46.    
  46. 	</div>

    47.    
  47. </body>

    48.    
  48. </html>

相关 [布局 宽度 适应] 推荐：

[常用布局]左栏固定宽度，右栏自适应的两种纯CSS方法

- - 蓝飞技术部落格
其一，左栏固定宽度，右栏自适应之绝对定位法：. 左栏固定宽度，右栏自适应之绝对定位法. 由于左栏使用绝对定位，脱离了文档流，因此有一个缺陷，即当左栏高度大于右栏时，无法将container撑开，这个缺陷单单只看两栏布局并没有太大影响，但如果两栏布局下面有一个底栏，就会出现底栏与左栏重叠的情况：.

iPhone 6的自适应布局

- - CSDN博客推荐文章
从IOS6开始，苹果公司就一直建议我们使用自适应布局，但是迄今为止，我发现大家都在回避这个问题，考虑的最多的仍然是固定布局. iPhone 6的上市让人们很难再去逃避自适应布局这个问题，四种屏幕尺寸（如果要支持iPad就要上升到5种）、三种分辨率和转向似乎让着手于自适应布局变得更加简单. 在文章的最后，你应该能流畅使用 storyboards、 约束(constraints)和 size class特性，这三个是Apple为开发和制作自适应布局提供的Xcode工具.

iPhone6设计自适应布局

- - CSDN博客推荐文章
在Xcode中，storyboard是一个可以让我们对应用界面进行可视化布局的工具，你首先可以在storyboard文件中看到一个或若干个iOS设备屏幕大小的布局区，然后你可以从组件库（Object Library）中拖拽组件到屏幕布局区中进行布局（比如按钮、图片、文本框、labels等），你还可以定义屏幕布局区之间的连接关系.

网站布局宽度设置多大比较好

- - 鲁塔弗的博客
查看一个日UV 1000ip的垃圾站的站点分析日志，该网站站用户年龄在20-30岁左右，男性为主，无地域分布特征，得到如下数据. ie6 用户仍然保持 39%比例，比去年60要少很多，但是还是各种浏览器中占有率最高的. 在普通网民中，firefox占有率非常低. 操作系统使用xp的用户占了90%，非常高，我倾向于相信这个数据，我两台windows电脑都是使用的window xp作为操作系统，微软的os战略失败了.

display:table-cell自适应布局下连续单词字符换行

- - 张鑫旭-鑫空间-鑫生活
本文地址： http://www.zhangxinxu.com/wordpress/?p=2161. 一、过年回家，快刀乱麻，直入主题. 之前有 几次提到了使用 display:table-cell实现强大的任意尺寸元素的自适应布局（都藏在长长文章之中）. 这里开篇再次提一下，希望能将该技术普及下去.

帮助你构建自适应布局的30款优秀 jQuery 插件（下篇）

- - 博客园_首页
自适应设计（Responsive Layouts）是时下网页设计领域最热门的话题之一，自适应设计的目标是要让产品界面能够响应用户的行为，根据不同终端设备自动调整尺寸，带给用户良好的使用体验. 下面是收集的15款优秀的自适应 . jQuery 插件，希望这些插件能够帮助到您. Tiny Fluid Grid Tiny Fluid Grid是一个非常新颖的网格生成工具，能够在线预览和下载.

Android 布局之线性布局、相对布局、表格布局、帧布局

- - CSDN博客推荐文章
1、LinearLayout（线性布局）. 2、RelativeLayout（相对布局）. 3、TableLayout（表格布局 两行两列）. 4、FrameLayout（帧布局）显示控件会进行叠加，后者会叠加在前者之上. 作者：h7870181 发表于2012-11-7 22:28:59 原文链接.

css三列布局

- - Wing的风言风语
   web平面设计中有一个既经典又基础的问题（据说很多公司面试都考）：三列布局问题，就是一个大盒子，里面竖直再分三块小盒子并排，其中左边的盒子和右边的盒子固定宽度，中间的盒子自适应宽度，无乱怎么样放大缩小浏览器都不会变形. 这两天研究了一下这个问题，默认父容器是body，1：设置三个盒子都左浮动且宽度都是33.3%，不行.

JavaScript Iframe 自动适应

- - ITeye博客
场景：Iframe嵌入flash,希望flash能随着页面的resize而resize. 首先导入JQuery框架，并设置iframe的scrolling=“auto”,这样的话可以自动的出现滚动条. 然后添加window的resize事件.  这样的话，每次浏览器resize的话，都会对iframe重新设置height，从而得到iframe resize的效果.

Android实现图片宽度100%ImageView宽度且高度按比例自动伸缩

- - CSDN博客移动开发推荐文章
在ListView中为了实现图片宽度100%适应ImageView容器宽度，让高度自动按比例伸缩功能，查了很多资料，搞了一下午都没找出个现成的办法，不过貌似有个结论了，就是：. Android自身不能实现这样的效果，只有自己动手丰衣足食. ImageView 中有个 scaleType 属性，设置图片在 view 中的缩放方式，本来以为 fit_center 可以实现，结果很无语，莫名其妙，没能实现宽度贴合容器宽度，两侧都是空白区域.