位置：相对留下一个空的空间

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

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

Answer 1

那么，不要使用相对定位。 当使用相对定位时，元素仍然占用原来的空间，而你不能摆脱那个。 例如，您可以使用绝对定位，也可以使元素相互浮动。

我玩了一下布局，我build议你把这三条规则改为：

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

另一个适用于我的方法是在你移动的相对元素中使用一个负的margin-bottom。 没有必要去绝对定位。

就像是：

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

类似（如果不是相同的话）我现在看到的解决scheme，从绿色。

Answer 3

 #page { overflow:hidden; } 

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

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

 .maincontent { height: 675px; } 

Answer 7

我有一个类似的问题。 最简单的方法就是replace#page margin-top 。

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>