阿西河

所有教程

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

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    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>
    

    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    本文目录
    目录