html页面的底部一直保持在页底

最新推荐文章于 2024-04-07 19:57:31 发布

spring_007_999

最新推荐文章于 2024-04-07 19:57:31 发布

阅读量826

点赞数 1

文章标签：前端开发语言 Powered by 金山文档

本文链接：https://blog.csdn.net/spring_007_999/article/details/129750893

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>底部一直在页面的最下面</title>
    </head>
    <style>
    *{padding: 0;margin: 0;}
    html,body{height: 100%;}
    body{display: flex;flex-direction: column;}
    .container{flex:1 0 auto;}
    .jiegou-head,.jiegou-foot{flex:0 0 auto;} 
    .jiegou-head{background-color:#ddd;height: 50px;}
    .jiegou-foot{background-color: aquamarine;height: 100px;}  
    </style>
    <body>
        <header class="jiegou-head">头部</header>
        <div class="container">
            中间内容区域
        </div>
        <footer class="jiegou-foot">尾部</footer>
    </body>
</html>