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

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

当您通过添加 top 值来移动元素时，您就是在这样做 - 将其向下移动到页面中，而不必更改任何其他内容。所以，如果你拿一个原本用白色 space 定位的元素并添加一个 top 值，你几乎肯定会把它向下移动，这样它现在就在 space 上面会在那里。在这种情况下，您的代码段中的元素看起来已经向下移动到现在靠在底部。

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

因此，作为初步建议：在您的内容 div 底部添加一个 spacer 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>

Answer 2

只需使用 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 3

只需将 'bottom' & 'top' 添加到绝对位置

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>

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

How to add space between a div and the bottom of the page

html

css

css-position