前端：页面内容不够，始终把footer固定在底部

最新推荐文章于 2024-08-23 09:58:09 发布

mangxi8200

最新推荐文章于 2024-08-23 09:58:09 发布

阅读量9.2k

点赞数

本文链接：https://blog.csdn.net/mangxi8200/article/details/80918067

版权

本文介绍两种确保网页footer始终处于底部的方法：使用绝对定位和margin负值。这两种方法都要求footer的高度固定，适用于不同场景下的布局需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面内容不够，始终把footer固定在底部</title>
    <style>
        html, body {
            height:100%;
            min-height: 100%;
            position: relative;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #f00;
        }

        .main-content {
            background-color: #0f0;
            padding-bottom: 100px;/*padding-bottom要等于或大于footer的height值*/
        }

        footer {
            position: absolute;
            bottom: 0;
            height: 100px;
            background-color: #00f;
            width:100%;
        }
    </style>
</head>
<body>
<header>header</header>
<div class="main-content">content</div>
<footer>footer</footer>
</body>
</html>

margin负值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面内容不够，始终把footer固定在底部</title>
    <style>
        html,body{
            height:100%;
            margin:0;
            padding:0;
        }
        .top{
            min-height:100%;
        }
        header{
            background-color: #f00;
        }
        .main-content{
            padding-bottom:100px;/*padding-bottom要等于或大于footer的height值*/
        background-color: #0f0;
        }
        footer{
            height:100px;
            margin-top: -100px;
            background-color: #00f;
        }
    </style>
</head>
<body>
<div class="top">
    <header>header</header>
    <div class="main-content">content</div>
</div>
<footer>footer</footer>
</body>
</html>