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>
原文地址:https://www.cnblogs.com/chenzxl/p/11435836.html