📌  相关文章
📜  如何使 div 粘在页面底部引导程序 - Html (1)

📅  最后修改于: 2023-12-03 14:51:49.326000             🧑  作者: Mango

如何使 div 粘在页面底部

在 web 开发中，有时我们需要将一个 div 元素粘在页面底部，无论页面的内容长度为何。本篇文章将介绍几种方法来实现这一功能。

使用 position 属性

通过设置 div 元素为绝对定位，并将其放置在页面底部即可实现。具体代码如下：

<div style="position: absolute; bottom: 0;">
  这是要粘在页面底部的 div 元素。
</div>
使用 flex 布局

通过将页面的主体内容放在一个容器中，并设置容器的 display 属性为 flex，再将容器的子元素设置 flex-grow: 1 可以实现将 div 元素粘在页面底部的效果。具体代码如下：

<body style="display: flex; flex-direction: column; min-height: 100vh;">
  <div style="flex-grow: 1;">
    这是页面的主体内容。
  </div>
  <div>
    这是要粘在页面底部的 div 元素。
  </div>
</body>
使用 table 布局

通过将页面的主体内容放在一个 table 中，并将 table 的高度设置为 100% 可以实现将 div 元素粘在页面底部的效果。具体代码如下：

<body style="height: 100%; margin: 0;">
  <table style="height: 100%; width: 100%; border-collapse: collapse;">
    <tbody>
      <tr style="height: 100%;">
        <td style="height: 100%;">
          这是页面的主体内容。
        </td>
      </tr>
      <tr>
        <td>
          这是要粘在页面底部的 div 元素。
        </td>
      </tr>
    </tbody>
  </table>
</body>
总结

通过设置 div 元素的样式，使用 flex 布局或 table 布局都可以实现将 div 元素粘在页面底部的效果。开发者可以根据实际需求选择合适的方案来实现。