[分享]css元素始终固定在div的底部

在Web开发中，我们会经常遇到需要将一个元素始终固定在其所在的父级div容器的底部的情况。这时候，我们可以使用CSS的属性来实现这个效果。div { : relative; / 确保父元素是相对定位 ...

在Web开发中，我们会经常遇到需要将一个元素始终固定在其所在的父级div容器的底部的情况。这时候，我们可以使用CSS的position属性来实现这个效果。

div {
  position: relative; /* 确保父元素是相对定位 */
  height: 400px; /* 设置父元素高度 */
}

.bottom-element {
  position: absolute; /* 设置子元素为绝对定位 */
  bottom: 0; /* 设置子元素距离底部的距离为0 */
} 

在上述代码中，我们首先将父元素设置为相对定位的，然后设置其高度。接着，我们将需要固定在底部的子元素设置为绝对定位，并且将其距离父元素底部的距离设置为0，这样就可以实现元素始终固定在底部的效果。

需要注意的是，如果父元素没有设置高度，那么子元素将会覆盖在其它内容之上，因此在使用这种方法时，一定要设置父元素的高度。

除了使用absolute定位，我们还可以使用CSS的flex布局来实现这个效果。

div {
  display: flex; /* 将父元素设置为flex布局 */
  flex-direction: column; /* 将子元素垂直排列 */
  height: 400px; /* 设置父元素高度 */
}

.bottom-element {
  margin-top: auto; /* 将子元素的上边距设为auto */
} 

在上述代码中，我们将父元素设置为flex布局，并将子元素垂直排列。接着，我们将需要固定在底部的子元素的上边距设置为auto，这样它就会自动占据剩余空间，并将自己推到底部。

总的来说，这两种方法都可以实现固定一个元素在div底部的效果，可以根据具体需求选择使用哪种方法。