html两个div上下排列

可以使用CSS中的flexbox属性来实现两个div上下排列。具体的实现方法如下：

HTML代码：

<div class="container">
  <div class="top"></div>
  <div class="bottom"></div>
</div>

CSS代码：

.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 设置容器高度为视口高度 */
}

.top {
  flex: 1; /* 设置上面的div占据剩余空间 */
  background-color: red;
}

.bottom {
  height: 100px; /* 设置下面的div高度为100px */
  background-color: blue;
}

这样，上面的div会占据剩余的空间，下面的div则固定为100px高度，从而实现上下排列的效果。