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

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

 

一、HTML代码：

 

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代码：

 

Html代码  

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