html的div盒子上下分布

要实现上下分布的 div 盒子布局，可以使用 CSS 的 flexbox 或者 grid 布局。下面分别介绍这两种方法的实现方式。

1. 使用 flexbox 布局：

<div class="container">
  <div class="box">上部内容</div>
  <div class="box">下部内容</div>
</div>

.container {
  display: flex;
  flex-direction: column; /* 设置主轴方向为垂直方向 */
  justify-content: space-between; /* 垂直方向上均匀分布 */
  height: 100%; /* 设置容器高度，确保布局生效 */
}

.box {
  flex: 1; /* 均分剩余空间 */
}

2. 使用 grid 布局：

<div class="container">
  <div class="box">上部内容</div>
  <div class="box">下部内容</div>
</div>

.container {
  display: grid;
  grid-template-rows: 1fr 1fr; /* 将容器分为两行，每行占比相等 */
  height: 100%; /* 设置容器高度，确保布局生效 */
}

.box {
  /* 可以设置一些样式，例如背景色、边框等 */
}

以上两种方法都可以实现上下分布的 div 盒子布局，具体选择哪种方法取决于你的需求和其他样式的要求。你可以根据自己的情况选择适合的布局方式。