html - 如何将元素从顶部定位到固定位置，直到被另一个元素插入

Question

我试图找到一个与我相同的问题，但找不到。可能是因为我不知道用正确的词来解释我的问题。

无论如何，假设我有一个动态生成内容的 div，并且在 div 下方有一个按钮。我想在 div 和按钮之间有一些空白(大约 200px)。这是一个图表来说明:

 ##############################
 #                            #
 #    Div with dynamically    #
 #     generated content      #
 #                            #
 ############################## 


           ↑
         200px
           ↓


       ##########
       # Button #
       ##########

但是，如果 div 的高度变大，我希望 div 和按钮之间的空间收缩到某个最小距离。所以基本上按钮应该不移动，而 div 会越来越大，直到 div 和按钮之间有一定的距离(例如 5px)。

我知道问题应该表现出对回答问题的一些尝试，但我不知道从哪里开始。我正在考虑绝对定位按钮相对于父级但 div 不会将其按下。我知道我应该给按钮一个 margin-top:5px;。

Answer 1

我认为你可以在 wrap div 上使用 Flexbox 和 min-height 来做到这一点，然后你只需添加 margin-top 在 按钮上

这是短文本的样子

.wrap {
  min-height: 100px;
  border: 1px solid black;
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
button {
  margin-top: 20px;
}

<div class="wrap">
  <div class="inner">lorem</div>
  <button>BTN</button>
</div>

但是，当您增加文本大小时，wrap div 会增加其高度，但按钮仍会保持其与文本的 margin-top 距离。

.wrap {
  min-height: 100px;
  border: 1px solid black;
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
button {
  margin-top: 20px;
}

<div class="wrap">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem ut ducimus beatae veniam quam tenetur maxime, commodi quo, doloribus inventore amet blanditiis nihil voluptates voluptatum reprehenderit nam facilis assumenda consequuntur eius, qui dolorum id repudiandae.</div>
  <button>BTN</button>
</div>