利用层的table-row、table-cell属性进行页面布局

利用层的table-row、table-cell属性可以进行等高、宽度自适应页面布局，这是参看了《我所知道的几种display:table-cell的应用》及《基于display:table的CSS布局》两篇文章给我的启发。

一、HTML代码：

1. <div id="wrapper">
2. <div id="header"></div>
3. <div id="main">
4. <div id="nav">
5. 你一定也有过这种感觉的。当你心事重重，渴望找一个人聊一聊的时候，那个可以聊的人来了，可是你们却并没有聊什么。当然，聊是聊了，可是他聊他的，你也试着开始聊你的，只是到后来，你放弃了……那么，最后的办法就是静下来，啃啮自己的寂寞。或者反过来说，让寂寞来吞噬你。------罗兰《寂寞的感觉》
6. <p>&nbsp;</p>
7. <p>&nbsp;</p>
8. </div>
9. <div id="content">
10. 奔波了一天，收到了无数的生日快乐，享受了电影见面会现场各种形式的祝福和礼物，以及场面宏大的生日快乐歌，感谢＜西风烈＞，感谢支持我的朋友们！现在机场举长寿面祝你们都永远幸福快乐！
11. <p>&nbsp;</p>
12. <p>&nbsp;</p>
13. <p>&nbsp;</p>
14. <p>&nbsp;</p>
15. <p>&nbsp;</p>
16. <p>&nbsp;</p>
17. <p>&nbsp;</p>
18. <p>&nbsp;</p>
19. <p>&nbsp;</p>
20. <p>&nbsp;</p>
21. <p>&nbsp;</p>
22. <p>&nbsp;</p>
23. <p>&nbsp;</p>
24. <p>&nbsp;</p>
25. </div>
26. </div>
27. <div id="footer">此处显示  id "footer" 的内容</div>
28. </div>

二、CSS代码：

1. <style type="text/css">
2. /** ================= 页面布局CSS参数设置 ======================= */
3. /*  @编写：hegz */
4. /*  @日期：2010/11/10 */
5. body,td,th {
6. font-family: Verdana, Geneva, sans-serif;
7. font-size: 12px;
8. color: #333;
9. /*text-align: center;*/
10. margin: 0;
11. padding: 0;
12. }
13. /* 包裹容器 */
14. #wrapper{
15. width: 780px;               /* 整体页面宽度可按需改变，可设为百分比参数 */
16. margin: 0 auto;             /* 页面居中设置 */
17. border: 1px solid #B7B7B7;
18. }
19. /* 页头 */
20. #header {
21. background-image: url(logo2.png);
22. background-repeat: no-repeat;
23. height: 230px;
24. #d3dff2;
25. }
26. /* 页中 */
27. #main {
28. display: table-row;     /* 宽度自适应设置 */
29. /*border-collapse: collapse;*/
30. overflow: hidden;       /* 宽度自适应设置 */
31. width: 100%;            /* 宽度自适应设置 */
32. #FFF;
33. border-top-width: 1px;
34. border-bottom-width: 1px;
35. border-top-style: solid;
36. border-bottom-style: solid;
37. border-top-color: #B7B7B7;
38. border-bottom-color: #B7B7B7;
39. }
40. /* 导航栏区块 */
41. #nav {
42. display: table-cell;       /* 宽度自适应设置 */
43. *display: inline-block;    /* 宽度自适应设置 */
44. *float:left;               /* 宽度自适应设置 */
45. width: 180px;              /* 导航栏定宽设置 */
46. padding: 10px;
47. #FFE6E6;
48. text-align: left;
49. margin-bottom: -2000px;    /* 等高设置，注意：一定要放在float、width、padding的后面 */
50. *padding-bottom: 2000px    /* 等高设置，注意：一定要放在float、width、padding的后面 */
51. }
52. /* 内容显示区块 */
53. #content {
54. display: table-cell;       /* 宽度自适应设置 */
55. *display: inline-block;    /* 宽度自适应设置 */
56. text-align: left;
57. padding: 10px;
58. }
59. /* 页脚 */
60. #footer{
61. text-align: center;
62. padding: 10px;
63. #d3dff2;
64. }
65. </style>