如何在 div 和页面底部之间添加空间

Question

我有这个 div 向下延伸超出页面高度并且 div 下的白色间距消失了，我如何将白色间距添加回来？

div {
  background-color: grey;
  position: relative;
  top: 136px;
}

<div>
  <p>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum</p>
</div>

Here's a picture of the bugged div being inspected

Answer 1

只需使用margin-top 而不是top，这样距离就添加在顶部，而不是div只是被该值移动，相对于它在文档流中的原始位置（不扩展父元素的高度）。

div {
  background-color: grey;
  position: relative;
  margin-top: 136px;
}

<div>
  <p>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum</p>
</div>

Answer 2

只需添加“底部”和“顶部”即可定位绝对值

div {
  background-color: grey;
  position: absoulote;
 bottom: 100px;
top:100px;
}

<div>
  <p>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum</p>
</div>

Answer 3

当您通过添加 top 值来移动元素时，您就是在这样做 - 将其向下移动到页面中，而不必更改任何其他内容。因此，如果您将一个元素放置在周围的空白处并添加一个top 值，您几乎肯定会将它向下移动，以便它现在位于本来应该存在的空间之上。在这种情况下，您的 sn-p 中的元素看起来已被向下移动，以至于它现在靠在底部。

我在提出解决方案时遇到的问题是，我完全不知道您的问题与您发布的屏幕截图有何关系。该图像显示一个 div 占据了窗口的整个垂直高度，并且似乎根本没有设置 top ！而且，更重要的是，您会在弹出窗口中显示 #Content 属性，同时在右侧的 Inspector 面板中选择了 body 元素。

因此，作为初步建议：在内容 div 的底部添加一个分隔 div，在其中放置一个白色块。

div {
  position: relative;
}

.content {
  background-color: grey;
  position: relative;
  top: 136px;
}

.spacer {
  background-color: white;
  height: 60px;
}

<div class="content">
  <p>Lorem Ipsum1<br>Lorem Ipsum2<br>Lorem Ipsum3<br>Lorem Ipsum4<br>Lorem Ipsum5<br>Lorem Ipsum6<br>Lorem Ipsum7<br>Lorem Ipsum8<br>Lorem Ipsum9<br>Lorem Ipsum10<br>Lorem Ipsum11<br>Lorem Ipsum12<br>Lorem Ipsum13<br>Lorem Ipsum14</p>
  <div class="spacer"></div>
</div>