CSS实现footer“吸底”效果

沃梦达教程前端开发

2023-12-21

CSS实现footer“吸底”效果的完整攻略如下：

CSS实现footer“吸底”效果的完整攻略如下：

1. HTML结构

首先需要在HTML中添加footer元素，通常情况下，整个HTML结构的最外层会使用一个div包裹，这个div我们称之为容器，例如：

<div class="container">
  ...
  <footer>这里是 footer</footer>
</div>

2. CSS样式

为了实现吸底效果，我们需要使用CSS来设置footer的样式。我们需要使用到flex布局，需要对容器添加以下样式：

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

其中，min-height: 100vh;表示容器的最小高度为100vh（即视窗的高度），这样就可以保证在内容不足时，footer仍旧吸底。

接下来，对footer添加以下样式：

footer {
  margin-top: auto;
}

margin-top: auto;表示将footer的顶部外边距设置为自动，这样就可以使得footer相对于容器底部吸底。

示例1

<div class="container">
  <main>这里是内容</main>
  <footer>这里是 footer</footer>
</div>

<style>
  .container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  footer {
    margin-top: auto;
  }
</style>

示例2

<body>
  <div class="wrapper">
    <main>这里是内容</main>
    <footer>这里是 footer</footer>
  </div>
</body>

<style>
  body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .wrapper {
    flex-grow: 1;
  }

  footer {
    margin-top: auto;
  }
</style>

在示例2中，我们将容器设置为了body，而不是普通的div容器，这样就能在内容少时也能让footer吸底。另外，我们使用了flex-grow: 1;将wrapper元素的flex-grow属性设置为1，使其充满整个父元素，这样当内容较少时也能保证footer吸底。

沃梦达教程

本文标题为：CSS实现footer“吸底”效果