HTML 使用CSS将Div推到页面底部

在本文中，我们将介绍如何使用HTML和CSS将Div推到页面的底部。通过使用CSS的布局属性和定位属性，我们可以让一个Div元素停留在页面的底部，无论页面内容多少都可以实现。

阅读更多：HTML 教程

使用Flexbox实现

Flexbox是一种CSS布局模型，它提供了一种简单而灵活的方式来创建响应式的页面布局。通过使用Flexbox中的align-items属性，我们可以轻松地将一个Div元素推到页面的底部。

首先，在HTML中，我们创建一个父级容器Div，并添加一些内容，使其具有一定的高度。

<div class="parent">
  <div class="content">
    <!-- 这里是页面内容 -->
  </div>
</div>

然后，在CSS中，我们使用Flexbox来将父级容器Div的子元素垂直对齐，并将子元素推到底部。

.parent {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 设置父级容器Div的最小高度为视窗的高度 */
}

.content {
  margin-top: auto; /* 将Div元素的上边距设置为auto，使其向底部推动 */
}

这样，父级容器Div的内容将始终推到页面的底部。

使用定位属性实现

除了使用Flexbox，我们还可以使用CSS中的定位属性来实现将Div推到页面的底部。通过将Div的定位设置为绝对定位，并将定位的参考对象设置为页面的底部，我们可以实现这一效果。

首先，在HTML中，我们创建一个父级容器Div，并为其添加一些内容。

<div class="parent">
  <div class="content">
    <!-- 这里是页面内容 -->
  </div>
</div>

然后，在CSS中，我们使用定位属性来将父级容器Div的子元素推到页面的底部。

.parent {
  position: relative; /* 设置父级容器Div的定位为相对定位 */
  min-height: 100vh; /* 设置父级容器Div的最小高度为视窗的高度 */
}

.content {
  position: absolute; /* 将Div元素的定位设置为绝对定位 */
  bottom: 0; /* 将Div元素与父级容器Div的底部对齐 */
}

这样，父级容器Div的内容将被推到页面的底部。