html页面的底部一直保持在页底_html固定在底部

作者：weixin_40725706 | 2024-02-11 20:54:57

踩

html固定在底部


<!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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/76915