[分享]css中将元素固定在页面底部

CSS中的属性可以用来控制元素的位置，而其中的fixed值可以让元素相对于浏览器窗口固定不动，即不随页面的滚动而移动。利用这一点，我们可以很方便地将一个元素固定在页面底部。首先需要给需要固定的元素设置...

CSS中的position属性可以用来控制元素的位置，而其中的fixed值可以让元素相对于浏览器窗口固定不动，即不随页面的滚动而移动。利用这一点，我们可以很方便地将一个元素固定在页面底部。

首先需要给需要固定的元素设置position:fixed属性，然后再通过bottom:0来将它固定在页面底部。代码如下：

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

当然，如果底部元素的宽度大于浏览器窗口的宽度，那么便会出现横向滚动条，因此需要考虑将它的宽度设置为100%。同时，如果页面的内容比较长，会出现元素遮盖内容的情况，因此需要给页面的主体设置一个padding-bottom，使得页面下方留出足够的空白，以免影响页面的阅读体验。代码如下：

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}
body {
  padding-bottom: 50px;
} 

需要注意的是，底部元素的高度也需要预先设置好。否则，如果底部元素的高度超出了浏览器窗口的高度，将会出现纵向滚动条，影响页面的美观度。