使CSS页脚位于浏览器窗口的底部或内容的底部

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

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.content {
  flex: 1;
}

.footer {
  /* 在此处添加页脚样式 */
}

<div class="wrapper">
  <div class="content">
    <!-- 在此处放置内容 -->
  </div>
 <footer class="footer">
    <!-- 在此处放置页脚内容 -->
  </footer>
</div>

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

.wrapper {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100%;
}

.footer {
  /* 在此处添加页脚样式 */
}

<div class="wrapper">
  <div class="content">
    <!-- 在此处放置内容 -->
  </div>
 <footer class="footer">
    <!-- 在此处放置页脚内容 -->
  </footer>
</div>