zoukankan      html  css  js  c++  java
  • CSS布局:上中下三栏自适应高度

    <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            body, html {
                100%;
                height:100%;
                overflow:hidden;
            }
            .header {
                background: #C9F;
                 100%;
                height: 90px;
                overflow: hidden;
                position: absolute;
                top: 0;
            }
            .content {
                position:absolute;
                top:90px;
                bottom:32px;
                100%;
                overflow:hidden;
                height:100%;
            }
            .main {
                height:100%;
                background:#66CCFF;
                overflow-y:auto;
                text-align:center;
            }
            .footer {
                background: #9CF;
                 100%;
                height: 40px;
                position: absolute;
                bottom: 0;
                left: 0;
            }
        </style>
    </head>
    
    <body>
    <!-- 代码 开始 -->
    <div class="header">
        <br />这里是顶部
    </div>
    <div class="content">
        <div class="main">
            网页header和footer高度是固定的,中间的content高度自适应浏览器窗口高度,随着窗口的大小变动都是满屏的。
        </div>
    </div>
    <div class="footer">
        这里是底部
    </div>
    <!-- 代码 结束 -->
    </body>
  • 相关阅读:
    摆花
    关于我的博客
    博客美化更新日志
    页面美化代码1.x
    本人已转至新博客!
    回归博客园
    退役快乐
    Luogu神贴合辑
    代码高亮预览
    NOIp2018普及组初赛解题报告
  • 原文地址:https://www.cnblogs.com/chenzxl/p/11435836.html
Copyright © 2011-2022 走看看