CSS position:relative 留下一个空白空间

position:relative leaves an empty space

提问by Kir

Code is here: http://lasers.org.ru/vs/example.html

代码在这里：http: //lasers.org.ru/vs/example.html

How to remove an empty space under main block (#page)?

如何删除主块（#page）下的空白空间？

采纳答案by Guffa

Well, don't use relative positioning then. The element still takes up space where it originally was when using relative positioning, and you can't get rid of that. You can for example use absolute positioning instead, or make the elements float beside each other.

那么，不要使用相对定位。元素在使用相对定位时仍然占据原来的空间，你无法摆脱它。例如，您可以使用绝对定位，或者让元素并排浮动。

I played around with the layout a bit, and I suggest that you change these three rules to:

我玩了一下布局，我建议您将这三个规则更改为：

#layout { width: 636px; margin: 0 auto; }
#menu { position: absolute; width: 160px; margin-left: 160px; }
#page { width: 600px; padding: 8px 16px; border: 2px solid #404241; }

回答by plang

Another trick which worked fine for me is to use a negative margin-bottom in the relative element that you have moved. No need to go with absolute positioning.

另一个对我有用的技巧是在您移动的相关元素中使用负边距底部。无需使用绝对定位。

Something like:

就像是：

position: relative;
left: 100px
top: -200px;
margin-bottom: -200px;

Similar (if not identical) to the solution I see now, from green.

与我现在看到的绿色解决方案类似（如果不相同）。

回答by Carol McKay

#page 
{ 
     overflow:hidden; 
}

回答by UkrVolk11

I had the same issue. Negative margin didn't work for me as it left a massive white area where it used to be. I solved this problem in my case by manually entering height.

我遇到过同样的问题。负边距对我不起作用，因为它在过去留下了一个巨大的白色区域。我通过手动输入高度解决了这个问题。

.maincontent {
    height: 675px;
}

回答by alex

#page {
  padding-bottom: 0;
}

回答by Salman A

Try this rule:

试试这个规则：

#page {
  border: 2px solid #404241;
  bottom: 0;
  padding: 8px 16px;
  position: absolute;
  top: 70px;
  width: 600px;
}

I changed position to absolute, this allows you to use the bottom: 0property.

我将位置更改为绝对，这允许您使用该bottom: 0属性。

回答by green

I had a similar problem. The easiest way is to replace top on margin-topfor #page.

我有一个类似的问题。最简单的方法是将 top on 替换margin-top为#page。

回答by Abel Callejo

I was able to get rid of the whitespaces using the following framework:

我能够使用以下框架摆脱空格：

And here is the markup

这是标记

<div id="the-force-moved-element>I've been moved</div>
<div id="the-hack-part-1">
    <div id="the-hack-part-2>The quick brown fox jumps over the lazy dog</div>
</div>
<p>Lorem ipsum dolor sit amet...</p>

回答by Gerfried

This question seems to be well answered - however all the answers above had bad side effects in my layout. This is what really worked for me:

这个问题似乎得到了很好的回答 - 但是上面的所有答案在我的布局中都有不好的副作用。这才是真正对我有用的：

.moveUp {
    position: relative;
}
.moveUp > * {
    position: absolute;
    width: 100%;
    top: -75px;
}

/** This part is just design - ignore it ... ****/
.box1, .box2, .box3 {
    height: 100px;
    color: white;
}
.box1 {
    background: red;
}
.box2 {
    background: blue;
    height: 50px;
}
.box3 {
    background: green;
}

<div class="box1">Box 1</div>
<div class="moveUp"><div class="box2">Box 2 - 75px up</div></div>
<div class="box3">Box 3</div>

回答by Gabriel Gates

My answer is late but it may help others with a similar issue that I had.

我的回答晚了，但它可能会帮助其他人解决我遇到的类似问题。

I had a <div>with position: relative;where all the child elements have the position: absolute;style. This caused around 20pxof white space to appear on my page.

我有一个<div>与position: relative;所有的子元素有position: absolute;风格。这导致我的页面上出现大约 20像素的空白。

To get around this I added margin-top: -20px;to the next sibling element after the <div>with position: relative;.

为了解决这个问题，我margin-top: -20px;在<div>with之后添加了下一个同级元素position: relative;。

If you have a sibling element before, you can use margin-bottom: -20px;

如果你之前有一个兄弟元素，你可以使用 margin-bottom: -20px;

section {
  height: 200px;
}

<h2>Extra Whitespace</h2>
<section>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div style="position:relative;">
    <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
  </div>
  <div>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>


<h2>No Whitespace margin-top</h2>
<section>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div style="position:relative;">
    <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
  </div>
  <div style="margin-top:-20px;">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>


<h2>No Whitespace margin-bottom</h2>
<section>
  <div style="margin-bottom:-20px;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div style="position:relative;">
    <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
  </div>
  <div>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>