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

前端  /  管理员 发布于 7年前   152

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

左右两列，等高布局；

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

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

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

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

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

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

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

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

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

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

方法一：浮动布局

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

HTML Markup

CSS Code复制内容到剪贴板

1. <div id="left">Left sidebar</div>   
2. <div id="content">Main Content</div>   
3.   
4. CSS Code   
5.   
6. <style type="text/css">   
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. </style>   

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

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

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

HTML Markup

XML/HTML Code复制内容到剪贴板

1. <div id="left">  
2. Left Sidebar   
3. </div>  
4.   
5. <div id="content">  
6.   
7. <div id="contentInner">  
8.   
9. Main Content   
10.   
11. </div>  
12. </div>  

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. <div id="container">  
2.   
3. <div id="wrapper">  
4.   
5. <div id="sidebar">Left Sidebar</div>  
6.   
7. <div id="main">Main Content</div>  
8.   
9. </div>  
10.   
11. </div>  

CSS Code

CSS Code复制内容到剪贴板

1. <style type="text/css">   
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. </style>  

方法二

HTML Markup

XML/HTML Code复制内容到剪贴板

1. <div id="container">  
2.   
3. <div id="left" class="aside">Left Sidebar</div>  
4.   
5. <div id="content" class="section">Main Content</div>  
6.   
7. </div>  

CSS Code

CSS Code复制内容到剪贴板

1. <style type="text/css">   
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. </style>  

方法三：

HTML Markup

XML/HTML Code复制内容到剪贴板

1. <div id="container">  
2.   
3. <div id="content">Main Content</div>  
4.   
5. <div id="sidebar">Left Sidebar</div>  
6.   
7. </div>  

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%; /* So IE plays nice */  
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. <div id="container2">  
2.   
3. <div id="container1">  
4.   
5. <div id="col1"