css中文字放页面最底部

在 web 页面开发中，经常需要在页面底部添加一些版权、联系方式等信息，通常这些信息会以文本的形式呈现。然而这些文本如果直接放在页面底部的话，就有可能会对用户的页面体验产生不良影响。为了解决这个问题，我们可以使用 CSS 来实现将文字放在页面最底部而不影响页面其他内容。

实现这个效果的方法有多种，以下介绍一种比较常用的方法：

/* 先给页面最底部的容器元素设置样式，比如这里设置的是 body 元素 */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 这里的 100vh 表示 100% 视口高度，确保容器高度占满全屏 */
}

/* 然后给页面底部的文本容器添加样式 */
.footer {
  margin-top: auto; /* 设置上边距为 auto，将该容器位置放在页面底部 */
}

在上面的代码中，我们使用了 Flexbox 布局来实现将文本容器位置放在页面底部。具体地，设置了 body 的 display 属性为 flex，使其成为一个弹性容器，然后设置了 flex-direction 属性为 column，使其成为一个纵向排列的弹性盒子。接着，我们给容器设置了 min-height 属性为 100vh，这样可以确保容器高度占满整个视口。最后，给文本容器设置了 margin-top 属性为 auto，使其距离上方的元素与底部的距离是自动计算的，从而保证了其位置在页面底部。