CSS Code   

  

"text/css">   

  

*{   

  

margin: 0;   

  

padding: 0;   

  

}   

    

#left {   

  

float: left;   

  

width: 220px;   

  

background-color: green;   

  

}   

  

#content {   

  

background-color: orange;   

  

margin-left: 220px;/*==等于左边栏宽度==*/  

  

}   

  

上面这种实现方法最关键之处就是自适应宽度一栏“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 Sidebardiv>  
6.   
7. <div id="main">Main Contentdiv>  
8.   
9. div>  
10.   
11. div>  

CSS Code

CSS Code复制内容到剪贴板

1. "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.   

方法二

HTML Markup

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

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

CSS Code

CSS Code复制内容到剪贴板

1. "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.   

方法三：

HTML Markup

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

1. <div id="container">  
2.   
3. <div id="content">Main Contentdiv>  
4.   
5. <div id="sidebar">Left Sidebardiv>  
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">Left Sidebardiv>  
6.   
7. <div id="col2">Main Contentdiv>  
8.   
9. div>  
10.   
11. div>  

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. <div id="container1">  
2.   
3. <div id="container">  
4.   
5. <div id="left">Left Sidebardiv>  
6.   
7. <div id="content">  
8.   
9. <div id="contentInner">Main Contentdiv>  
10.   
11. div>  
12.   
13. div>  
14.   
15. div>  

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左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持潘少俊衡。