[分享]css3固定在底部

CSS3 的一个重要特性就是允许我们通过一些简单的样式来实现页面元素的固定定位。当我们想要让一个元素一直停留在页面底部时，可以使用 : fixed; 和 bottom: 0; 两个样式。.footer...

CSS3 的一个重要特性就是允许我们通过一些简单的样式来实现页面元素的固定定位。当我们想要让一个元素一直停留在页面底部时，可以使用 position: fixed; 和 bottom: 0; 两个样式。

.footer {
  position: fixed;
  bottom: 0;
} 

上面的代码将会把一个元素定位到页面底部。然而有时候我们需要考虑到页面内容的长度可能会超出一个屏幕，这时固定定位的元素可能会覆盖部分内容，影响页面的可读性。

解决这个问题的方法就是给页面底部添加一个占位元素，这样可以避免页面被固定定位的元素遮挡。具体实现是在页面底部添加一个宽度为100%、高度为固定值的空元素，并使用 clear: both; 样式清除浮动。

.footer-placeholder {
  width: 100%;
  height: 60px; /* 根据实际需要设置高度 */
  clear: both;
} 

在 HTML 页面中，我们需要将固定定位的元素和占位元素都放在一个容器中，使得容器大小能够适应页面内容的长度变化，并保证固定定位的元素不会与页面内容重叠。

<div class="container">
  <!-- 页面内容 -->
  <div class="footer-placeholder"></div>
  <!-- 固定位置的元素 -->
  <div class="footer"></div>
</div> 

使用上面的代码可以在页面底部固定任意元素，而不会影响页面内容的可读性。