位置：亲戚留空空间

Question

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

如何删除主区（#page）下的空白区域？

Answer 1

另一个对我来说很好的技巧是在你移动的相对元素中使用负边距底部。无需绝对定位。

类似的东西：

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

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

Answer 2

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

我在布局上玩了一下，我建议你将这三个规则改为：

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

Answer 3

http://localhost:49688/

Answer 4

#page {
  padding-bottom: 0;
}

Answer 5

尝试此规则：

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

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

Answer 6

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

.maincontent {
    height: 675px;
}

Answer 7

我有类似的问题。最简单的方法是替换margin-top上的#page顶部。

Answer 8

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

这是标记

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

Answer 9

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

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

Answer 10

我的回答来晚了，但可能会帮助我解决类似的问题。

我有一个<div>和position: relative;，其中所有子元素都具有position: absolute;样式。这导致 20px 的空白出现在我的页面上。

要解决此问题，我在margin-top: -20px;和<div>之后的下一个兄弟元素中添加了position: relative;。

如果以前有一个兄弟元素，则可以使用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>

Answer 11

如果您不想在（相对）以下留空格，则是最佳解决方案

是否要使用边距顶部和位置：粘性

#page {
     margin-top: -280px;
     position: sticky;
}