Question

我试着找到一个和我一样的问题，但我找不到一个问题。可能是因为我不知道用正确的词来解释我的问题。

无论如何，让我们说我有一个动态生成内容的div，在div下面有一个按钮。我希望div和按钮之间有一些空白区域（大约200px）。这是一个说明的图表：

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


           ↑
         200px
           ↓


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

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

我知道问题应该显示一些尝试回答这个问题，但我不知道从哪里开始。我想把按钮放在相对于父母的位置，但是div不会把它推下来。我知道我应该给按钮margin-top:5px;。

Answer 1

我认为您可以在Flexbox div上使用min-height和wrap执行此操作，然后只需在margin-top上添加button

所以这就是短文的外观

.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>

Answer 2

您可以使用jquery执行此操作，并使用条件语句来评估元素之间的距离。类似的东西：

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

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

Answer 3

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

Nenad的回答也不错，但这个版本更兼容跨浏览器。

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: