如何将一个元素固定在距离顶部的位置，直到被另一个元素推动

Question

如何将一个元素固定在距离顶部的位置，直到被另一个元素推动

3

我尝试寻找与我的问题相同的问题，但是我找不到一个。可能是因为我不知道用什么词语来解释我的问题。

无论如何，假设我有一个包含动态生成内容的div，而在div下面有一个按钮。我想在div和按钮之间留出一些空白（大约200像素）。以下是一个图示：

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


           ↑
         200px
           ↓


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

然而，如果 div 的高度变大了，我希望 div 和按钮之间的间距会收缩，直到达到某个最小距离。所以基本上，当 div 变得越来越大时，按钮应该不移动，直到 div 和按钮之间有一定距离为止（例如 5px）。

我知道问题应该展示一些解决问题的尝试，但我不知道从哪里开始。我想将按钮绝对定位于父元素，但这样 div 不会将其向下推。我知道应该给按钮一个 margin-top:5px;。

- Cave Johnson

3个回答

1

你可以使用jQuery，并使用条件语句来评估元素之间的距离。类似这样的东西：

var el1 = $("#firstElement").position();
var el2 = $("#secondElement").position();

if (el1.bottom > (el2.top+5)) {
    $("#secondElement).animate({ top: el2.bottom+5 });
}

- Jake Stewart

谢谢Jake，这看起来不错，我点了+1。我正在寻找一个非JavaScript的解决方案。 - Cave Johnson

0

我最终找到了另一个解决方案，满足我的问题，而且它非常简单。我只需用具有min-height的另一个div包装扩展div。因此，扩展div将扩展，并在超过其父级的min-height之前不会影响按钮的位置。

Nenad的答案也很好，但这个更加兼容跨浏览器。

.wrap {
 min-height:100px;
}
button {
 margin-top:5px;
}

<div class="wrap">
 <div class="inner">
  Lorem ipsum dolor sit amet.
    </div>
</div>
<button>Click Here</button>

- Cave Johnson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nenad Vracar · Accepted Answer

我认为您可以通过在wrap div上使用Flexbox和min-height，然后只需在button上添加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>