我很乐意为您讲解“详解八种方法实现CSS页面底部固定”的完整攻略。

详解八种方法实现CSS页面底部固定

在开发网页时，经常会遇到需要将底部固定在页面底部的需求。下面介绍八种CSS方法可以实现底部固定的效果。

方法1：使用绝对定位

这是最简单的一种方法，只需设置底部的样式为绝对定位，距离底部为0即可。

footer{
  position: absolute;
  bottom: 0;
  width: 100%;
}

方法2：使用相对定位

这种方法与绝对定位类似，只不过把父元素设为相对定位即可。

body{
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;
}

footer{
  position: absolute;
  bottom: 0;
  width: 100%;
}

方法3：使用负边距

我们可以给页面主体添加一个padding-bottom，然后把底部元素的margin-top设置为负padding值，这样就可以让底部元素固定在页面底部了。

body{
  margin: 0;
  padding-bottom: 100px;
}

footer{
  position: relative;
  margin-top: -100px;
  height: 100px;
  clear: both;
}

方法4：使用flex布局

我们可以使用flex布局中的flex-grow属性，让页面主体占满剩余的空间，而底部容器则设置flex-shrink: 0，固定底部高度即可。

html, body{
  height: 100%;
  margin: 0;
}

body{
  display: flex;
  flex-direction: column;
}

main{
  flex: 1;
}

footer{
  height: 100px;
  flex-shrink: 0;
}

方法5：使用table布局

我们可以使用table布局，将body的布局方式设置为table，将页面主体和底部都设置为table-row，然后将底部的高度设置为1%。

body{
  display: table;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

main, footer{
  display: table-row;
}

footer{
  height: 1%;
}

方法6：使用网格布局

我们可以使用网格布局，将body的布局方式设置为grid，将页面主体放在grid-area: main中，将底部放在grid-area: footer中，并设置grid-template-rows: auto 100px。

body{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 100px;
  height: 100%;
  margin: 0;
}

main{
  grid-area: main;
}

footer{
  grid-area: footer;
}

方法7：使用sticky定位

我们可以使用sticky定位，将底部的定位方式设置为sticky，底部就会固定在页面底部了。

footer{
  position: sticky;
  bottom: 0;
  width: 100%;
}

方法8：使用calc函数

我们可以使用calc函数，将底部的高度计算为100vh减去页面主体高度。

body{
  height: 100%;
  margin: 0;
}

main{
  min-height: calc(100vh - 100px);
}

footer{
  height: 100px;
}

以上八种方法，都可以实现CSS页面底部固定的效果。您可以根据自己的需求，自由选择。

下面给出两个示例。

示例1：使用相对定位

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>底部固定</title>
  <style>
    body{
      position: relative;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    main{
      min-height: calc(100vh - 100px);
      background-color: #eee;
      padding: 20px;
    }

    footer{
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 100px;
      background-color: #333;
      color: #fff;
      text-align: center;
    }
  </style>
</head>
<body>
  <main>
    <h1>底部固定示例</h1>
    <p>这是一个使用相对定位方法得到的底部固定效果示例。</p>
  </main>
  <footer>
    <p>版权信息 © 2021</p>
  </footer>
</body>
</html>

示例2：使用flex布局

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>底部固定</title>
  <style>
    html, body{
      height: 100%;
      margin: 0;
    }

    body{
      display: flex;
      flex-direction: column;
    }

    main{
      flex: 1;
      background-color: #eee;
      padding: 20px;
    }

    footer{
      height: 100px;
      flex-shrink: 0;
      background-color: #333;
      color: #fff;
      text-align: center;
    }
  </style>
</head>
<body>
  <main>
    <h1>底部固定示例</h1>
    <p>这是一个使用flex布局方法得到的底部固定效果示例。</p>
  </main>
  <footer>
    <p>版权信息 © 2021</p>
  </footer>
</body>
</html>

希望这份攻略能对您有所帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解八种方法实现CSS页面底部固定 - Python技术站

详解八种方法实现CSS页面底部固定

详解八种方法实现CSS页面底部固定

方法1：使用绝对定位

方法2：使用相对定位

方法3：使用负边距

方法4：使用flex布局

方法5：使用table布局

方法6：使用网格布局

方法7：使用sticky定位

方法8：使用calc函数

示例1：使用相对定位

示例2：使用flex布局

相关文章