杰拉斯的博客

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

杰拉斯 杰拉斯 | 时间：2013-08-26, Mon | 34,847 views
前端开发　

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

  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>

如需转载请注明出处：杰拉斯的博客

相关文章

9 条评论 »

  1. bsspirit bsspirit

    新的项目，一般都开始用bootstrap做布局了。

    回复
    1. 蓝飞 蓝飞

      @bsspirit
      只可惜它不支持IE6。

      回复
  2. 王雪松的站点 王雪松的站点

    博主已经完全成为了一个前端工程师了！

    回复
    1. 蓝飞 蓝飞

      思想是相通的→_→

      回复
      1. 王雪松的站点 王雪松的站点

        今天换主机了!经常报Bad Request (Invalid Hostname)；唉，不知道哪的问题……

        回复
        1. 蓝飞 蓝飞

          @王雪松的站点
          刚试了一下，我这边可以上= =

          回复
  3. 袁源 袁源

    好好用，好厉害！！

    回复
  4. 知了 知了

    我就是不太明白为啥兼容IE6左栏消失所提供的设置，如container标签里的margin-left: 230px;_zoom: 1;和nav标签里的margin-left: -230px;position: relative;为何这么设置？

    回复
    1. 蓝飞 蓝飞

      兼容左栏消失问题是这两个属性：
      #container 的 _zoom: 1; 和 #nav 的 position: relative
      _zoom: 1 是用来触发 IE 的hasLayout，position: relative 不太记得了。

      回复