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

最新推荐文章于 2023-11-22 11:18:37 发布

weixin_30293135

最新推荐文章于 2023-11-22 11:18:37 发布

阅读量193

点赞数

原文链接：http://www.cnblogs.com/chenzxl/p/11435836.html

版权

<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

weixin_30293135

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS布局：上中下三栏自适应高度

<style type="text/css"> *{ margin:0; padding:0; } body, html { width:100%; height:100%; overflow:...
复制链接

扫一扫