I have this div that extends downwards beyond the page height and the white spacing under the div disappears, how do I add the white spacing back?

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Here's a picture of the bugged div being inspected

CodePudding user response：

Just use margin-top instead of top, that way that distance is added at the top instead of the div just being moved by that value, in relation to its original position in the document flow (which doesn't extend the height of the parent element).

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

When you move an element by adding a top value, you're doing just that - moving it down the page, without necessarily changing anything else. So, if you take an element that would have been positioned with white space around and add a top value, you will almost certainly move it down so that it now is over the space that would have been there. In this case, the element in your snippet looks to have been moved down so far that it's now against the bottom.

The problem I have in suggesting a solution is that I have absolutely no idea how your question relates to the screenshot you posted. That image shows a div occupying the full vertical height of the window and that doesn't appear to have top set at all! And, more than that, you're showing the #Content properties in a popup while having the body element selected in the Inspector panel to the right.

So, as an initial suggestion: add a spacer div at the bottom of your content div that puts a white block there.

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Just add 'bottom' & 'top' to position absoulte

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>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>