CSS布局：上中下三栏自适应高度

<style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        body, html {
            width:100%;
            height:100%;
            overflow:hidden;
        }
        .header {
            background: #C9F;
            width: 100%;
            height: 90px;
            overflow: hidden;
            position: absolute;
            top: 0;
        }
        .content {
            position:absolute;
            top:90px;
            bottom:32px;
            width:100%;
            overflow:hidden;
            height:100%;
        }
        .main {
            height:100%;
            background:#66CCFF;
            overflow-y:auto;
            text-align:center;
        }
        .footer {
            background: #9CF;
            width: 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

标签

css

overflow

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!