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

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

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

  
  1. <!doctype html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>左栏固定宽度,右栏自适应之绝对定位法</title>
  6. <style type="text/css">
  7. body{
  8. margin: 0;
  9. }
  10. #nav{
  11. top: 0;
  12. left: 0;
  13. width: 230px;
  14. height: 600px;
  15. background: #ccc;
  16. position: absolute;
  17. }
  18. #main{
  19. height: 600px;
  20. margin-left: 230px;
  21. background: #0099ff;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div id="container">
  27. <div id="nav">
  28. 左栏
  29. </div>
  30. <div id="main">
  31. 右栏
  32. </div>
  33. </div>
  34. </body>
  35. </html>

看起来很美好,但是。。

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

  
  1. <!doctype html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>左栏固定宽度,右栏自适应之绝对定位法</title>
  6. <style type="text/css">
  7. body{
  8. margin: 0;
  9. }
  10. #nav{
  11. top: 0;
  12. left: 0;
  13. width: 230px;
  14. height: 600px;
  15. background: #ccc;
  16. position: absolute;
  17. }
  18. #main{
  19. height: 400px;
  20. margin-left: 230px;
  21. background: #0099ff;
  22. }
  23. #footer{
  24. text-align: center;
  25. background: #009000;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <div id="container">
  31. <div id="nav">
  32. 左栏
  33. </div>
  34. <div id="main">
  35. 右栏
  36. </div>
  37. </div>
  38. <div id="footer">
  39. 底栏
  40. </div>
  41. </body>
  42. </html>

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

  
  1. <!doctype html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>左栏固定宽度,右栏自适应之负margin法</title>
  6. <style type="text/css">
  7. body{
  8. margin: 0;
  9. }
  10. #container{
  11. margin-left: 230px;
  12. _zoom: 1;
  13. /*兼容IE6下左栏消失问题*/
  14. }
  15. #nav{
  16. float: left;
  17. width: 230px;
  18. height: 600px;
  19. background: #ccc;
  20. margin-left: -230px;
  21. position: relative;
  22. /*兼容IE6下左栏消失问题,IE6真不让人省心啊>_<*/
  23. }
  24. #main{
  25. height: 600px;
  26. background: #0099ff;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div id="container">
  32. <div id="nav">
  33. 左栏
  34. </div>
  35. <div id="main">
  36. 右栏
  37. </div>
  38. </div>
  39. </body>
  40. </html>

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

  
  1. <!doctype html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>左栏固定宽度,右栏自适应之负margin法</title>
  6. <style type="text/css">
  7. body{
  8. margin: 0;
  9. }
  10. #container{
  11. margin-left: 230px;
  12. _zoom: 1;
  13. /*兼容IE6下左栏消失问题*/
  14. }
  15. #nav{
  16. float: left;
  17. width: 230px;
  18. height: 600px;
  19. background: #ccc;
  20. margin-left: -230px;
  21. position: relative;
  22. /*兼容IE6下左栏消失问题,IE6真不让人省心啊>_<*/
  23. }
  24. #main{
  25. height: 400px;
  26. background: #0099ff;
  27. }
  28. #footer{
  29. clear: both;
  30. text-align: center;
  31. background: #009000;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div id="container">
  37. <div id="nav">
  38. 左栏
  39. </div>
  40. <div id="main">
  41. 右栏
  42. </div>
  43. </div>
  44. <div id="footer">
  45. 底栏
  46. </div>
  47. </body>
  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 可以实现,结果很无语,莫名其妙,没能实现宽度贴合容器宽度,两侧都是空白区域.