阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      CSS 上中下三栏自适应高度

      原理是 header 和 footer 用position:absoluteL 做绝对定位;

      然后中间的 midel 的widthheight实现 100%;

      HTML 代码如下:

      <body>
      <!-- 代码 开始 -->
      <div class="header">这里是顶部</div>
      <div class="content">
          <div class="main">
              <br/>
              <br/>
              网页header和footer高度是固定的,中间的content高度自适应浏览器窗口高度代码,随着窗口的大小变动都是满屏的。
          </div>
      </div>
      <div class="footer">这里是底部</div>
      <!-- 代码 结束 -->
      </body>
      
      

      CSS 代码如下:

      <STYLE type="text/css">
          *{margin:0;padding:0;}
          body, html {
              padding:90px 0 32px 0;
              width:100%;
              height:100%;
              overflow:hidden;
          }
          /*顶部*/
          .header {
              width: 100%;
              height: 90px;
              line-height: 90px;
              text-align: center;
              overflow: hidden;
              position: absolute;
              top:0;
              background:#FFCC00;
          }
          /*中间的*/
          .content {
              width:100%;
              height:100%;
              position:absolute;
              top:90px;
              bottom:32px;
              overflow:hidden;
          }
          .main {
              height:100%;
              background:#66CCFF;
              overflow-y:auto;
              text-align:center;
          }
          /*底部的*/
          .footer {
              width: 100%;
              height:40px;
              line-height:40px;
              text-align: center;
              letter-spacing:5px;
              position: absolute;
              bottom: 0;
              left: 0;
              background:orange;
          }
      </STYLE>
      

      目录
      本文目录
      目录