上下固定布局,中间自适应撑开

a瑶池 / 2024-09-26 / 原文

<!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="pragram" content="no-cache" />
    <!--网页不保存在缓存中,每次访问都刷新页面。-->
    <meta http-equiv="cache-control" content="no-cache, must-revalidate" />
    <!--同上面意思差不多,必须重新加载页面-->
    <!--网页在缓存中的过期时间为0,一旦网页过期,必须从服务器上重新订阅-->
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></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;
        vertical-align: bottom;
      }
      #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>
          </div>
        </div>
      </div>
      <div id="footer">footer</div>
    </div>
  </body>
</html>