利用層的table-row、table-cell屬性進行頁面布局

利用層的table-row、table-cell屬性可以進行等高、寬度自適應頁面布局，這是參看了《我所知道的幾種display:table-cell的應用》及《基於display:table的CSS布局》兩篇文章給我的啟發。

 

一、HTML代碼：

 

<div id="wrapper">
  <div id="header"></div>
<div id="main">
        <div id="nav">
你一定也有過這種感覺的。當你心事重重，渴望找一個人聊一聊的時候，那個可以聊的人來了，可是你們卻並沒有聊什么。當然，聊是聊了，可是他聊他的，你也試着開始聊你的，只是到后來，你放棄了……那么，最后的辦法就是靜下來，啃嚙自己的寂寞。或者反過來說，讓寂寞來吞噬你。------羅蘭《寂寞的感覺》
          <p>&nbsp;</p>
          <p>&nbsp;</p>
        </div>
        <div id="content">
奔波了一天，收到了無數的生日快樂，享受了電影見面會現場各種形式的祝福和禮物，以及場面宏大的生日快樂歌，感謝＜西風烈＞，感謝支持我的朋友們！現在機場舉長壽面祝你們都永遠幸福快樂！
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
        </div>
  </div>
  <div id="footer">此處顯示  id "footer" 的內容</div>
</div>

 

 

二、CSS代碼：

 

<style type="text/css">
/** ================= 頁面布局CSS參數設置 ======================= */
/*  @編寫：hegz */
/*  @日期：2010/11/10 */

body,td,th {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #333;
    /*text-align: center;*/
    margin: 0;
    padding: 0;
}

/* 包裹容器 */
#wrapper{
    width: 780px;               /* 整體頁面寬度可按需改變，可設為百分比參數 */
    margin: 0 auto;             /* 頁面居中設置 */
    border: 1px solid #B7B7B7;
}

/* 頁頭 */
#header {
    background-image: url(logo2.png);
    background-repeat: no-repeat;
    height: 230px;
    #d3dff2;
}

/* 頁中 */
#main {
    display: table-row;     /* 寬度自適應設置 */
    /*border-collapse: collapse;*/
    overflow: hidden;       /* 寬度自適應設置 */
    width: 100%;            /* 寬度自適應設置 */
    #FFF;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #B7B7B7;
    border-bottom-color: #B7B7B7;
}

/* 導航欄區塊 */
#nav {
    display: table-cell;       /* 寬度自適應設置 */
    *display: inline-block;    /* 寬度自適應設置 */
    *float:left;               /* 寬度自適應設置 */
    width: 180px;              /* 導航欄定寬設置 */
    padding: 10px;
    #FFE6E6;
    text-align: left;
    margin-bottom: -2000px;    /* 等高設置，注意：一定要放在float、width、padding的后面 */
    *padding-bottom: 2000px    /* 等高設置，注意：一定要放在float、width、padding的后面 */
}

/* 內容顯示區塊 */
#content {
    display: table-cell;       /* 寬度自適應設置 */
    *display: inline-block;    /* 寬度自適應設置 */
    text-align: left;
    padding: 10px;
}

/* 頁腳 */
#footer{
    text-align: center;
    padding: 10px;
    #d3dff2;
}
</style>