高考报名时间2022年11月1日还剩 天 距离2023年6月7日高考还有 天
栏目分类:
子分类:
返回
名师互学网用户登录
名师互学网
快速导航关闭
当前搜索
当前分类
前沿技术 软件开发 系统运维 产品运营 生活办公 面试经验 考试题库
子分类
人工智能 大数据 云计算 区块链 物联网 深度学习 机器学习 NLP 计算机视觉 语音识别 其他 大数据系统 数据可视化 数据挖掘与分析 其他 Docker/k8s 虚拟化 云平台 其他 基本原理 数字货币 智能合约 EOS应用 其他 通讯技术 嵌入式开发 单片机 物联网应用 HarmonyOS 其他 后端开发 Web开发 移动开发 游戏开发 Python Java 架构设计 C/C++/C# PHP .Net Go语言 R语言
实用工具
学习工具 小学数学练习 字帖生成 在线画板 函数绘制 拼音字母表 在线词典 黄历查询 亲戚关系计算 安全期计算 中国历史 Excel函数 模拟请求 json格式化 浏览器指纹
热门搜索
路由器设置 木托盘 宝塔面板 儿童python教程 心情低落 朋友圈 vim 双一流学科 专升本 我的学校 日记学校 西点培训学校 汽修学校 情书 化妆学校 塔沟武校 异形模板 西南大学排名 最精辟人生短句 6步教你追回被骗的钱 南昌大学排名 清朝十二帝 北京印刷学院排名 北方工业大学排名 北京航空航天大学排名 首都经济贸易大学排名 中国传媒大学排名 首都师范大学排名 中国地质大学(北京)排名 北京信息科技大学排名
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

CSS左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)

CSS教程 更新时间： 发布时间： IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

CSS左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)

左侧固定宽，右侧自适应屏幕宽；

左右两列，等高布局；

左右两列要求有最小高度，例如：200px;（当内容超出200时，会自动以等高的方式增高）

要求不用JS或CSS行为实现；

仔细分析试题要求，要达到效果其实也并不是太难，只是给人感觉像有点蛋疼的问题一样。但是你仔细看后你会觉得不是那么回事：

左边固定，右边自适应布局，这个第一点应该来说是非常的容易，实现的方法也是相当的多，那么就可以说第一条要求已不是什么要求了；

左右两列等高布局，这一点相对来说要复杂一些，不过你要是了解了怎么实现等高布局，那么也是不难。我个人认为这个考题关键之处就在考这里，考你如何实现等高布局；所以这一点你需要整明白如何实现；

至于第三条要求，应该来说是很方面的，我们随处都可以看到实现最小高度的代码；

第四条这个要求我想是考官想让我们面试的人不能使用js来实现等高布局和最小高度的功能。

上面简单的分析了一下实现过程，那么最终关键之处应该是就是“让你的代码要能同时实现两点，其一就是左边固定，右边自适应的布局；其二就是实现两列等高的布局”，如果这两个功能完成，那么你也就可以交作业了。那么下面我们就先来看看这两 点是如合实现：

一、两列布局：左边固定宽度，右边自适应宽度

这样的布局，其实不是难点，我想很多同学都有实现过，那么我就在此稍微介绍两种常用的方法：

方法一：浮动布局

这种方法我采用的是左边浮动，右边加上一个margin-left值，让他实现左边固定，右边自适应的布局效果

HTML Markup

CSS Code复制内容到剪贴板
  1. "left">Left sidebar   
  2. "content">Main Content   
  3.   
  4. CSS Code   
  5.   
  6.   
  7.   
  8. *{   
  9.   
  10. margin: 0;   
  11.   
  12. padding: 0;   
  13.   
  14. }   
  15.     
  16. #left {   
  17.   
  18. float: left;   
  19.   
  20. width: 220px;   
  21.   
  22. background-color: green;   
  23.   
  24. }   
  25.   
  26. #content {   
  27.   
  28. background-color: orange;   
  29.   
  30. margin-left: 220px;  
  31.   
  32. }   
  33.   

上面这种实现方法最关键之处就是自适应宽度一栏“div#content”的“margin-left”值要等于固定宽度一栏的宽度值，大家可以点击查看上面代码的DEMO

方法二：浮动和负边距实现

这个方法采用的是浮动和负边距来实现左边固定宽度右边自适应宽度的布局效果，大家可以仔细对比一下上面那种实现方法，看看两者有什么区别：

HTML Markup

XML/HTML Code复制内容到剪贴板
  1.   
  2. Left Sidebar   
  
  •   
  •   
  •   
  •   
  •   
  • Main Content   
  •   
  •   
  •   

    CSS Code

    CSS Code复制内容到剪贴板
    1. *{   
    2.   
    3. margin: 0;   
    4.   
    5. padding: 0;   
    6.   
    7. }   
    8.   
    9. #left {   
    10.   
    11. background-color: green;   
    12.   
    13. float: left;   
    14.   
    15. width: 220px;   
    16.   
    17. margin-right: -100%;   
    18.   
    19. }   
    20.   
    21. #content {   
    22.   
    23. float: left;   
    24.   
    25. width: 100%;   
    26.   
    27. }   
    28.   
    29. #contentInner {   
    30.   
    31. margin-left: 220px;  
    32.   
    33. background-color: orange;   
    34.   
    35. }  

    这种方法看上去要稍微麻烦一点，不过也是非常常见的一种方法，大家可以看看他的DEMO效果。感觉一下，和前面的DEMO有什么不同之处。
     
    我 在这里就只展示这两种方法，大家肯定还有别的实现方法，我就不在多说了，因为我们今天要说的不是这个问题。上面完成了试题的第一种效果，那么大家就要想办 法来实现第二条要求——两列等高布局。这一点也是本次面试题至关重要的一点，如果你要是不清楚如何实现等高布局的话，我建议您先阅读本站的《八种创建等高 列布局》，里面详细介绍了八种等高布局的方法，并附有相关代码，而且我们后面的运用中也使用了其中的方法。

    现在关键的两点都完成了，那么我们就需要实现第三条要求，实现最小高度的设置，这个方法很简单：

    CSS Code复制内容到剪贴板
    1. min-height: 200px;   
    2.   
    3. height: auto !important;   
    4.   
    5. height: 200px;   

    上面的代码就轻松的帮我们实现了跨浏览器的最小高度设置问题。这样一来，我们可以交作业了，也完面了这个面试题的考试。为了让大家更能形象的了解，我在这里为大家准备了五种不同的实现方法：

    方法一：

    别的不多说，直接上代码，或者参考在线DEMO，下面所有的DEMO都有HTML和CSS代码，感兴趣的同学自己慢慢看吧。

    HTML Markup

    XML/HTML Code复制内容到剪贴板
    1.   
    2.   
    3.   
    4.   
    5. Left Sidebar
      
  •   
  • Main Content  
  •   
  •   
  •   
  •   

    • CSS Code

    CSS Code复制内容到剪贴板
    1.   
    2.   
    3. * {   
    4.   
    5. margin: 0;   
    6.   
    7. padding: 0;   
    8.   
    9. }   
    10.   
    11. html {   
    12.   
    13. height: auto;   
    14.   
    15. }   
    16.   
    17.     
    18.   
    19. body {   
    20.   
    21. margin: 0;   
    22.   
    23. padding: 0;   
    24.   
    25.     
    26.   
    27. }   
    28.   
    29.     
    30.   
    31. #container {   
    32.   
    33. background: #ffe3a6;   
    34.   
    35. }   
    36.   
    37.     
    38.   
    39. #wrapper {   
    40.   
    41. display: inline-block;   
    42.   
    43. border-left: 200px solid #d4c376;  
    44.   
    45. position: relative;   
    46.   
    47. vertical-align: bottombottom;   
    48.   
    49. }   
    50.   
    51.     
    52.   
    53. #sidebar {   
    54.   
    55. float: left;   
    56.   
    57. width: 200px;   
    58.   
    59. margin-left: -200px;  
    60.   
    61. position: relative;   
    62.   
    63. }   
    64.   
    65.     
    66.   
    67. #main {   
    68.   
    69. float: left;   
    70.   
    71. }   
    72.   
    73.     
    74.   
    75. #maing,   
    76.   
    77. #sidebar{   
    78.   
    79. min-height: 200px;   
    80.   
    81. height: auto !important;   
    82.   
    83. height: 200px;   
    84.   
    85. }   
    86.   
    87.   

    方法二

    HTML Markup

    XML/HTML Code复制内容到剪贴板
    1.   
    2.   
    3. Left Sidebar  
    4.   
    5. Main Content  
    6.   
    7.   

    CSS Code

    CSS Code复制内容到剪贴板
    1.   
    2.   
    3. *{margin: 0;padding: 0;}   
    4.   
    5. #container {   
    6.   
    7. overflow: hidden;   
    8.   
    9. }   
    10.   
    11.     
    12.   
    13. #left {   
    14.   
    15. background: #ccc;   
    16.   
    17. float: left;   
    18.   
    19. width: 200px;   
    20.   
    21. margin-bottom: -99999px;   
    22.   
    23. padding-bottom: 99999px;   
    24.   
    25.     
    26.   
    27. }   
    28.   
    29.     
    30.   
    31. #content {   
    32.   
    33. background: #eee;   
    34.   
    35. margin-left: 200px;  
    36.   
    37. margin-bottom: -99999px;   
    38.   
    39. padding-bottom: 99999px;   
    40.   
    41. }   
    42.   
    43. #left,   
    44.   
    45. #content {   
    46.   
    47. min-height: 200px;   
    48.   
    49. height: auto !important;   
    50.   
    51. height: 200px;   
    52.   
    53. }   
    54.   
    55.   

    方法三：

    HTML Markup

    XML/HTML Code复制内容到剪贴板
    1.   
    2.   
    3. Main Content  
    4.   
    5. Left Sidebar  
    6.   
    7.   

    CSS Code

    CSS Code复制内容到剪贴板
    1. *{margin: 0;padding: 0;}   
    2.   
    3. #container{   
    4.   
    5. background-color:#0ff;   
    6.   
    7. overflow:hidden;   
    8.   
    9. padding-left:220px;   
    10.   
    11. }   
    12.   
    13. * html #container{   
    14.   
    15. height:1%;   
    16.   
    17. }   
    18.   
    19. #content{   
    20.   
    21. background-color:#0ff;   
    22.   
    23. width:100%;   
    24.   
    25. border-left:220px solid #f00;  
    26.   
    27. margin-left:-220px;  
    28.   
    29. float:rightright;   
    30.   
    31. }   
    32.   
    33. #sidebar{   
    34.   
    35. background-color:#f00;   
    36.   
    37. width:220px;   
    38.   
    39. float:rightright;   
    40.   
    41. margin-left:-220px;  
    42.   
    43. }   
    44.   
    45. #content,   
    46.   
    47. #sidebar {   
    48.   
    49. min-height: 200px;   
    50.   
    51. height: auto !important;   
    52.   
    53. height: 200px;   
    54.   
    55. }  

    方法四：

    HTML Markup

    XML/HTML Code复制内容到剪贴板
    1.   
    2.   
    3.   
    4.   
    5. Left Sidebar  
    6.   
    7. Main Content  
    8.   
    9.   
    10.   
    11.   

    CSS Code

    CSS Code复制内容到剪贴板
    1. *{padding: 0;margin:0;}   
    2.   
    3. #container2 {   
    4.   
    5.  float: left;   
    6.   
    7.  width: 100%;   
    8.   
    9.  background: orange;   
    10.   
    11.  position: relative;   
    12.   
    13.  overflow: hidden;   
    14.   
    15.  }   
    16.   
    17.  #container1 {   
    18.   
    19.  float: left;   
    20.   
    21.  width: 100%;   
    22.   
    23.  background: green;   
    24.   
    25.  position: relative;   
    26.   
    27.  left: 220px;  
    28.   
    29.  }   
    30.   
    31.         
    32.   
    33.  #col2 {   
    34.   
    35.  position: relative;   
    36.   
    37.  margin-right: 220px;  
    38.   
    39.  }   
    40.   
    41.         
    42.   
    43.  #col1 {   
    44.   
    45.  width: 220px;   
    46.   
    47.  float: left;   
    48.   
    49.  position: relative;   
    50.   
    51.  margin-left: -220px;  
    52.   
    53.  }   
    54.   
    55.      
    56.   
    57. #col1,#col2 {   
    58.   
    59. min-height: 200px;   
    60.   
    61. height: auto !important;   
    62.   
    63. height: 200px;   
    64.   
    65. }  

    方法五：

    HTML Markup

    XML/HTML Code复制内容到剪贴板
    1.   
    2.   
    3.   
    4.   
    5. Left Sidebar  
    6.   
    7.   
    8.   
    9. Main Content  
    10.   
    11.   
    12.   
    13.   
    14.   
    15.   

    CSS Code
    CSS Code复制内容到剪贴板
    1. *{padding: 0;margin: 0;}   
    2.   
    3. #container1 {   
    4.   
    5. float: left;   
    6.   
    7. width: 100%;   
    8.   
    9. overflow: hidden;   
    10.   
    11. position: relative;   
    12.   
    13. background-color: #dbddbb;   
    14.   
    15. }   
    16.   
    17. #container {   
    18.   
    19. background-color: orange;   
    20.   
    21. width: 100%;   
    22.   
    23. float: left;   
    24.   
    25. position: relative;   
    26.   
    27. left: 220px;  
    28.   
    29. }   
    30.   
    31. #left {   
    32.   
    33. float: left;   
    34.   
    35. margin-right: -100%;   
    36.   
    37. margin-left: -220px;  
    38.   
    39. width: 220px;   
    40.   
    41. }   
    42.   
    43. #content {   
    44.   
    45. float: left;   
    46.   
    47. width: 100%;   
    48.   
    49. margin-left: -220px;  
    50.   
    51. }   
    52.   
    53. #contentInner {   
    54.   
    55. margin-left: 220px;  
    56.   
    57. overflow: hidden;   
    58.   
    59. }   
    60.   
    61. #left,   
    62.   
    63. #content {   
    64.   
    65. min-height: 200px;   
    66.   
    67. height: auto !important;   
    68.   
    69. height: 200px;   
    70.   
    71. }  

    针对上面的面试题要求，我一共使用了五种不同的方法来实现，经过测试都能在各浏览器中运行，最后我有几点需要特别提出：

    上面所有DEMO中，要注意其方向性的配合，并且值要统一，如果您想尝试使用自己布局需要的宽度值，请对照相关代码环节进行修改；

    上面所有DEMO中，没有设置他们之间的间距，如果您想让他们之间有一定的间距，有两种方法可能实现，其一在上面的DEMO基础上修改相关参数，其二，在相应的里面加上"div"标签，并设置其“padding”值，这样更安全，不至于打破你的布局

    因为我们这里有一列使用了自适应宽度，在部分浏览器下，当浏览器屏幕拉至到一定的大小时，给我们带来的感觉是自适应宽度那栏内容像是被隐藏，在你的实际项目中最好能在“body”中加上一个“min-width”的设置。

    以上这篇CSS左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。

    转载请注明：文章转载自 www.mshxw.com
    本文地址：https://www.mshxw.com/it/215897.html

    CSS教程相关栏目本月热门文章

    热门相关搜索
    路由器设置 木托盘 宝塔面板 儿童python教程 心情低落 朋友圈 vim 双一流学科 专升本 我的学校 日记学校 西点培训学校 汽修学校 情书 化妆学校 塔沟武校 异形模板 西南大学排名 最精辟人生短句 6步教你追回被骗的钱 南昌大学排名 清朝十二帝 北京印刷学院排名 北方工业大学排名 北京航空航天大学排名 首都经济贸易大学排名 中国传媒大学排名 首都师范大学排名 中国地质大学(北京)排名 北京信息科技大学排名 中央民族大学排名 北京舞蹈学院排名 北京电影学院排名 中国戏曲学院排名 河北政法职业学院排名 河北经贸大学排名 天津中德应用技术大学排名 天津医学高等专科学校排名 天津美术学院排名 天津音乐学院排名 天津工业大学排名 北京工业大学耿丹学院排名 北京警察学院排名 天津科技大学排名 北京邮电大学(宏福校区)排名 北京网络职业学院排名 北京大学医学部排名 河北科技大学排名 河北地质大学排名 河北体育学院排名
    学习工具
    代数计算器
    三角函数
    解析几何
    立体几何
    知识解答
    教育知识
    百科知识
    生活知识
    常识知识
    写作必备
    作文大全
    作文素材
    句子大全
    实用范文
    关于我们
    关于我们
    联系我们
    网站地图
    交流群

    名师互学网交流群

    名师互学网客服

    名师互学网客服

    名师互学网 版权所有 (c)2021-2022 ICP备案号：晋ICP备2021003244-6号

    我们一直用心在做
    关于我们 文章归档 网站地图 联系我们

    版权所有 (c)2021-2022 MSHXW.COM

    ICP备案号：晋ICP备2021003244-6号