CSS经典布局---自适应

最新推荐文章于 2021-02-26 16:14:10 发布

JoyFE

最新推荐文章于 2021-02-26 16:14:10 发布

阅读量316

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Html/Css

本文链接：https://blog.youkuaiyun.com/Hreticent/article/details/80792534

Html/Css 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种网页布局技巧，实现头部和底部固定显示，中间部分自适应高度，并分为左中右三部分，其中左右两侧固定宽度，中间部分自适应剩余空间。通过简单的 HTML 和 CSS 实现响应式布局。

头部底部固定，中间部分自适应高度，且中间部分包含左中右三部分，其中左右固定，中间自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html, body {
            height:100%;
            margin:0;
            padding:0
        }
        .head,.footer{
            position: absolute;
            height:50px;
            width:100%;
            background: pink;
        }
        .head{
            top:0;
        }
        .footer{
            bottom:0;
        }
        .left ,.right{
            position:relative;
            width:100px;
            height: 100%;
            background-color: lightblue;            
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .center{
            position:absolute;    
            left:100px;
            right:100px;
            height: 100%;
            background-color: lightslategray;
        }
       .content{
           position:absolute;
           top:50px;
           bottom:50px;
           width: 100%;
       }
    </style>
</head>
<body>
    <div class="head"></div>
    <div class="content">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

效果如下：