css布局技巧：如何固定页脚在屏幕底部或内容底部

n1234567896

于 2024-12-27 14:38:30 发布

阅读量574

点赞数 6

分类专栏： css布局技巧文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/n1234567896/article/details/144768813

版权

css布局技巧专栏收录该内容

1 篇文章

订阅专栏

在网页设计和开发中，有时候我们希望将一个元素始终保持在屏幕底部或内容底部，不管内容的高度如何变化。这种布局需求可以通过使用一些CSS技巧来实现。在本文中，我们将来实现这样的布局。

<head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            main {
                width: 100%;
                height: 100vh;
                padding-bottom: 50px;
                margin-bottom: -50px;
                background: red;
                padding: 10px;
            }
            section {
                height: 300px;
                background-color: yellow;
            }
            footer {
                width: 100%;
                height: 50px;
                background: #000000;
            }
        </style>
    </head>
    <body>
        <main>
            <section></section>
        </main>
        <footer></footer>
    </body>