DivCSS布局實例：三行單列上下固定高度中間自適應_DIV+CSS實例
      
編輯Tag賺U幣
      


      教程Tag：暫無Tag,歡迎添加,賺取U幣!
      


      


						　　
      　　CSS布局：三行單列，上下固定高度，中間自適應，且內容垂直居中。 
      　　firefox 2.0 / win ie 6/ win ie 7 /opera 8.5 cn/win safari 測試通過。 

      　　對于非ie內核瀏覽器，通過設定display:table、display:table-row和display:table-cell來模擬表格的表現形式。 
      　　最外層#box { display:table; }，高度100%，其子層#header/#main/#footer為{ display:table-row; }，因此可以模擬表格的行效果，上下定高，則中間不定高的層自適應高度。 
      　　#wrap層為{ display:table-cell; }模擬單元格，因此可以設定{ vertical-align:middle; }，垂直居中。 

      　　由于Win IE不支持{ display:table; }，因此，只能采取定位的方式實現。<!--[if IE]>內是針對ie的設定。

      示例代碼 [www.wf0088.com]
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
      <html xmlns="http://www.w3.org/1999/xhtml"> 
      <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
      <title>DivCSS布局實例：三行單列 上下固定高度 中間自適應</title> 
      <style type="text/css"> 
      * { 
      margin:0; 
      padding:0; 
      } 
      html, 
      body, 
      #box { 
      height:100%; 
      font:small/1.5 "宋體", serif; 
      } 
      body { 
      text-align:center; 
      } 
      #box { 
      text-align:left; 
      background:#666; 
      display:table; 
      width:80%; 
      margin:0 auto; 
      position:relative; 
      } 
      #box > div { 
      display:table-row; 
      } 
      #header, 
      #footer { 
      background:#fcc; 
      height:50px; 
      } 
      #main { 
      background:#ccf; 
      } 
      #main #wrap { 
      display:table-cell; 
      background:#ffc; 
      vertical-align:middle; 
      } 
      #text { 
      text-align:center; 
      } 
      </style> 
      <!--[if IE]> 
      <style type="text/css"> 
      #header, 
      #footer { 
      width:100%; 
      z-index:3; 
      position:absolute; 
      } 

      #footer { 
      bottom:0; 
      } 
      #main { 
      height:100%; 
      z-index:1; 
      position:relative; 
      } 
      #main #wrap { 
      position:absolute; 
      top:50%; 
      width:100%; 
      text-align:left; 
      } 
      #main #text { 
      position:relative; 
      width:100%; 
      top:-50%; 
      background:#ccc; 
      } 
      </style> 
      <![endif]--> 
      </head> 

      <body> 
      <div id="box"> 
        <div id="header">header</div> 
        <div id="main"> 
          <div id="wrap"> 
          <div id="text"> 
                <p>內容內容</p> 
                <p>內容內容</p> 
                <p>內容內容</p> 
                <p>內容內容</p> 
                <p>內容內容</p> 
                <p>內容內容</p> 
                <p>內容內容</p> 
                <p>內容內容</p> 
                <p>內容內容</p> 
                <p>內容內容</p> 
                <p>內容內容</p> 
                <p>內容內容</p> 
                <p>內容內容</p> 
                <p>內容內容</p> 
              </div> 
              </div> 
        </div> 
        <div id="footer">footer</div> 
      </div> 
      </body> 
      </html> 

      　　查看最終的運行效果：

       代碼調試框 [www.wf0088.com]

           [ 可先修改部分代碼 再運行查看效果 ]
      




      

      



      


      來源：無憂整理//所屬分類：DIV+CSS實例/更新時間：2007-12-24


      

      



      


      



      相關DIV+CSS實例：