AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

css布局之左侧固定右侧自适应布局

2017-11-07 1168
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

 1.固定高度

 

     
 
  1. <!DOCTYPE HTML> 
    2.  
 
  2. <html> 
    3.  
 
  3. <head> 
    4.  
 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    5.  
 
  5. <title>左侧固定+右侧栏自适应宽度</title> 
    6.  
 
  6. <style type="text/css"> 
    7.  
 
  7. * 
    8.  
 
  8. { 
    9.  
 
  9.     margin:0; 
    10.  
 
  10.     padding:0; 
    11.  
 
  11. } 
    12.  
 
  12. #mainBody 
    13.  
 
  13.  {   
    14.  
 
  14.     margin:0 auto; 
    15.  
 
  15.     border:1px solid #ccc; 
    16.  
 
  16.     padding:5px; 
    17.  
 
  17. } 
    18.  
 
  18. #leftCol 
    19.  
 
  19. { 
    20.  
 
  20.     width:120px; 
    21.  
 
  21.     height:400px; 
    22.  
 
  22.     border:1px solid #ccc; 
    23.  
 
  23.     background-color:#f0f0f0; 
    24.  
 
  24.     position:absolute; 
    25.  
 
  25. } 
    26.  
 
  26. #rightCol 
    27.  
 
  27. { 
    28.  
 
  28.     border:1px solid #ccc; 
    29.  
 
  29.     background-color:#f0ffff; 
    30.  
 
  30.     height:400px; 
    31.  
 
  31.     margin-left:127px; 
    32.  
 
  32. } 
    33.  
 
  33. </style> 
    34.  
 
  34. </head> 
    35.  
 
  35.  
    36.  
 
  36. <body> 
    37.  
 
  37.     <div id="mainBody"> 
    38.  
 
  38.         <div id="leftCol"> 
    39.  
 
  39.         </div> 
    40.  
 
  40.         <div id="rightCol"> 
    41.  
 
  41.         </div> 
    42.  
 
  42.     </div> 
    43.  
 
  43. </body> 
    44.  
 
  44. </html> 
    45.  

 

截图：
 

 
 

 

这里只截了IE6的。
 

注：如果布局元素不是body子级，加个position:relative;即可。
 

 
 

除了使用定位以外，用浮动float:left也可以，原理都是脱离文档流，把控件留给其他元素。
 


  

 

 
 

但是有个问题， 由于absolute使得外面容器的高度取决于那个自适应的元素，比如我把高度改为300px看一下。
 

 
 

 

2.我们来拿float:left;这个方案讨论一下
 

我们知道对于浮动元素，脱离文档流，父元素捕捉不到其高度height,所以如果float的那个元素比较高，势必超出容器的边界。
 

我们思考，如果富容器也是float，是不是就可以摆脱这种现状，但是如果无限制的float，势必需要顶层做个清理。
 

所以我们采用多套一层float容器的方式实现：
 

我们上代码：
 

 
 

 

     
 
  1. <!DOCTYPE HTML> 
    2.  
 
  2. <html> 
    3.  
 
  3. <head> 
    4.  
 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    5.  
 
  5. <title>左侧固定+右侧栏自适应宽度</title> 
    6.  
 
  6. <style type="text/css"> 
    7.  
 
  7. * 
    8.  
 
  8. { 
    9.  
 
  9.     margin:0; 
    10.  
 
  10.     padding:0; 
    11.  
 
  11. } 
    12.  
 
  12. body 
    13.  
 
  13. { 
    14.  
 
  14.     padding:10px; 
    15.  
 
  15. } 
    16.  
 
  16. #mainBody 
    17.  
 
  17. { 
    18.  
 
  18.     width0:950px; 
    19.  
 
  19.     margin:0 auto; 
    20.  
 
  20.     border:1px solid #ccc; 
    21.  
 
  21.     padding:5px; 
    22.  
 
  22.     position0::relative; 
    23.  
 
  23.     overflow:hidden; 
    24.  
 
  24.     height:1%; 
    25.  
 
  25. } 
    26.  
 
  26. #layoutContainer 
    27.  
 
  27. { 
    28.  
 
  28.     float:left; 
    29.  
 
  29.     width:100%;  
    30.  
 
  30. } 
    31.  
 
  31. #leftCol 
    32.  
 
  32. { 
    33.  
 
  33.     width:120px; 
    34.  
 
  34.     height:200px; 
    35.  
 
  35.     border:1px solid #ccc; 
    36.  
 
  36.     background-color:#f0f0f0; 
    37.  
 
  37.     float:left; 
    38.  
 
  38. } 
    39.  
 
  39. #rightCol 
    40.  
 
  40. { 
    41.  
 
  41.     border:1px solid #ccc; 
    42.  
 
  42.     background-color:#f0ffff; 
    43.  
 
  43.     height:300px; 
    44.  
 
  44.     margin-left:127px; 
    45.  
 
  45. } 
    46.  
 
  46. </style> 
    47.  
 
  47. </head> 
    48.  
 
  48.  
    49.  
 
  49. <body> 
    50.  
 
  50.     <div id="mainBody"> 
    51.  
 
  51.         <div id="layoutContainer"> 
    52.  
 
  52.             <div id="leftCol"> 
    53.  
 
  53.             </div> 
    54.  
 
  54.             <div id="rightCol"> 
    55.  
 
  55.             </div> 
    56.  
 
  56.         </div> 
    57.  
 
  57.     </div> 
    58.  
 
  58. </body> 
    59.  
 
  59. </html> 
    60.  

 

上图：
 

 
 

 

 
 

注：解决可能的ie莫名白条问题。
 

对ie自适应列单独设定：
 

 

*margin-left:5px;/*两列之间的间距*/ *float:left; 
 


 


 


 


 


 


 

 本文转自 xcf007 51CTO博客，原文链接：http://blog.51cto.com/xcf007/525082，如需转载请自行联系原作者

                        
                    

                    
                        

                            

    
文章标签：

    

        

            前端开发
        

        

            容器
        

        

            Web App开发
        

    



                            

    
关键词：

    

        

            CSS布局
        

        

            CSS自适应
        

        

            CSS左侧
        

        

            CSS布局自适应
        

        

            CSS固定
        

    



                            
                        

                        
                        
                    
                

                


                

                    

                        

                            
                                
                            
                            

                        

                        技术小胖子
                        

                        

                    

                    

                        

                            

                            
目录

                        

                        

                    

                

                

                    

                


                

    
相关文章

    

        

            

                

                    杀死一只知更鸟debug
                    
                

                |
                
3天前

                |
                

                    前端开发
                    容器
                

            

            

                

                    
                        css布局-弹性布局学习笔记
                    
                    
这篇文章是关于CSS弹性布局的学习笔记，详细介绍了flex容器和元素的相关属性，包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等，解释了这些属性在弹性盒子布局中的作用和用法。


                    

                        

                            

                                杀死一只知更鸟debug
                                
                            

                            13
                            2
                            
                        

                    

                

                
            

        

        

            

                

                    杀死一只知更鸟debug
                    
                

                |
                
3天前

                |
                

                    JavaScript
                    前端开发
                

            

            

                

                    
                        网页前端课程设计-【模仿】香港中文大学官网，轮播图及div+css布局，js的dom操作
                    
                    
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计，包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。


                    

                        

                            

                                杀死一只知更鸟debug
                                
                            

                            16
                            0
                            
                        

                    

                

                
            

        

        

            

                

                    石小石Orz
                    
                

                |
                
2月前

                |
                

                    前端开发
                    安全
                    容器
                

            

            

                

                    
                        CSS如何优雅实现卡片多行排列布局？
                    
                    
【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局？

                    

                        

                            

                                石小石Orz
                                
                            

                            42
                            3
                            
                        

                    

                

                
            

        

        

            

                

                    技术混子
                    
                

                |
                
2月前

                |
                

                    前端开发
                    开发者
                    容器
                

            

            

                

                    
                        探索现代Web开发中的CSS Grid布局技术
                    
                    
【8月更文挑战第29天】在数字时代的浪潮中，网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具，为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用，帮助读者快速掌握这一强大的网页布局工具。



                    

                        

                            

                                技术混子
                                
                            

                            41
                            3
                            
                        

                    

                

                
            

        

        

            

                

                    土木林森
                    
                

                |
                
2月前

                |
                

                    前端开发
                    开发者
                    容器
                

            

            

                

                    
                        【Web布局的革命】探索CSS Grid栅格系统，打造未来网页设计！
                    
                    
【8月更文挑战第25天】在网页设计领域，布局至关重要。传统的布局方法难以满足复杂需求，CSS Grid 栅格系统因此诞生。它是一种二维布局模式，能直接控制行和列，简化复杂网格的设计。通过定义 `display: grid;` 创建网格容器，并利用 `grid-template-columns` 和 `grid-template-rows` 设置行列尺寸，轻松实现响应式布局。此外，CSS Grid 支持高级功能，如网格区域划分和对齐设置，极大提升了布局的灵活性和创意空间。随着浏览器兼容性的增强，CSS Grid 必将成为未来网页设计的关键技术之一。

                    

                        

                            

                                土木林森
                                
                            

                            51
                            1
                            
                        

                    

                

                
            

        

        

            

                

                    白如意i
                    
                

                |
                
2月前

                |
                

                    前端开发
                

            

            

                

                    
                        CSS Grid 布局：span 关键字
                    
                    
CSS Grid 布局：span 关键字

                    

                        

                            

                                白如意i
                                
                            

                            40
                            0
                            
                        

                    

                

                
            

        

        

            

                

                    刘志辉~
                    
                

                |
                
2月前

                |
                

                    前端开发
                    容器
                

            

            

                

                    
                        css中弹性布局使用方法
                    
                    
css中弹性布局使用方法

                    

                        

                            

                                刘志辉~
                                
                            

                            37
                            0
                            
                        

                    

                

                
            

        

        

            

                

                    ghost丶桃子
                    
                

                
                
                |
                

                    前端开发
                    JavaScript
                    容器
                

            

            

                

                    
                        css多栏自适应布局
                    
                    

                    

                        

                            

                                ghost丶桃子
                                
                            

                            1724
                            0
                            
                        

                    

                

                
            

        

        

            

                

                    游客fz577umxdejsg
                    
                

                |
                
2月前

                |
                

                    前端开发
                

            

            

                

                    
                        2s 利用 HTML+css动画实现企业官网效果
                    
                    
2s 利用 HTML+css动画实现企业官网效果

                    

                        

                            

                                游客fz577umxdejsg
                                
                            

                            43
                            2
                            
                        

                    

                

                
            

        

        

            

                

                    游客fz577umxdejsg
                    
                

                |
                
2月前

                
                

                    
                

            

            

                

                    
                        HTML+CSS 实现通用的企业官网页面（记得收藏）
                    
                    
HTML+CSS 实现通用的企业官网页面（记得收藏）

                    

                        

                            

                                游客fz577umxdejsg
                                
                            

                            59
                            2