CSS 实现内容高度不够的时候底部(footer)自动贴底

要让网页的底部内容在内容高度不足时自动贴底，可以通过以下几种方式实现。

方法一：使用flex布局

使用flex布局是实现自动贴底效果的最简单方法。只需要将网页的根元素设置为flex，并设置flex-direction为column，将内容部分设为flex-grow：1，将底部部分设置为flex-shrink：0，即可实现当内容高度不足时自动将底部部分推到底部。

示例代码：

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

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

.content {
  flex-grow: 1;
}

.footer {
  flex-shrink: 0;
}

方法二：使用绝对定位

使用绝对定位也可以实现底部自动贴底的效果。需要将底部部分设置为position: absolute，并设置bottom: 0，这样会将底部部分固定在底部。然后将内容部分设置为margin-bottom，使其在底部已有内容时，不会和底部部分发生重合。

示例代码：

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

.content {
  margin-bottom: 20px;
}

.footer {
  position: absolute;
  bottom: 0;
  height: 20px;
  width: 100%;
}

以上两种方法都可以实现底部自动贴底。一般情况下，flex布局比绝对定位更具灵活性，而绝对定位则更适合于实现特定的场景效果，如需要实现在底部悬浮的按钮等。具体使用哪种方法，取决于具体的需求和UI设计。