CSS 实现绝对底部一个完美解决方案

沃梦达教程前端开发

2023-12-20

下面是关于实现绝对底部的CSS完美解决方案的攻略：

下面是关于实现绝对底部的CSS完美解决方案的攻略：

1. 使用 Flexbox 布局

步骤：

首先要给外层容器（通常是元素）设置一个最小高度，以确保即便没有足够的内容撑满页面时也能让底部内容显示在底部。

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

将主要内容放入一个包含块元素中，并使用 flex-grow 属性将其填满剩余空间。

<body>
  <main class="content">
    <!-- 主要内容 -->
  </main>
  <footer class="footer">
    <!-- 底部内容 -->
  </footer>
</body>

.content {
  flex-grow: 1;
}

将底部内容放入一个固定高度容器中，并将其与主要内容平分剩余空间。

.footer {
  height: 50px; /* 底部内容高度 */
  flex-shrink: 0;
}

示例：

<body>
  <nav class="header">
    <!-- 导航栏 -->
  </nav>
  <main class="content">
    <!-- 主要内容 -->
  </main>
  <footer class="footer">
    <!-- 底部内容 -->
  </footer>
</body>

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

.content {
  flex-grow: 1;
}

.footer {
  height: 50px;
  flex-shrink: 0;
}

2. 使用绝对定位

步骤：

将外层容器和内层容器都设置为相对定位。

.container {
  position: relative;
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

将底部内容放入内层容器中，并设置一个固定高度。

<div class="container">
  <!-- 主要内容 -->
  <div class="content">
    <!-- 内容 -->
  </div>
  <!-- 底部内容 -->
  <div class="footer">
    <!-- 底部内容 -->
  </div>
</div>

.content {
  height: calc(100% - 50px); /* 减去底部内容高度 */
}

示例:

<div class="container">
  <!-- 主要内容 -->
  <div class="content">
    <!-- 内容 -->
  </div>
  <!-- 底部内容 -->
  <div class="footer">
    <!-- 底部内容 -->
  </div>
</div>

.container {
  position: relative;
}

.content {
  height: calc(100% - 50px);
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

以上就是实现绝对底部的完美解决方案。其中，使用 Flexbox 布局可以避免使用绝对定位产生的一些问题，更适用于响应式设计。而使用绝对定位则更加简单易懂，适用于一些简单的页面。

沃梦达教程

本文标题为：CSS 实现绝对底部一个完美解决方案