父项中的页边空白，子项中的页顶空白，如何清除下面的剩余高度

Question

我的设计需要白色背景，但顶部100像素必须没有背景。 所以我做了什么，我使用margin-top向下推具有白色背景的div，然后在该div内放置了另一个div，并使用我以前将第一个向下推的负值将其拉起。 工作正常。 但是正因为如此，我在下面有100px的未使用空间，需要摆脱它。 我该如何实现？

 <div id="container"> <div id="margin-top" style="margin-top: 100px;"> <div id="negative-top" style="position: relative; top: -100px;"> content </div> </div> <div> 

Answer 1

尝试这种方法，它将为您服务。

<div id="container">
<div id="margin-top" style="margin-top: 100px;">
<div id="negative-top" style="margin-top: -100px; padding-top: 100px">
content
</div>
</div>
<div>

Answer 2

您还可以在身体上使用渐变色代替背景色，从而消除负边距。

 background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 20px, #000000 20px, #000000 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 20px,#000000 20px,#000000 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #ffffff 0%,#ffffff 20px,#000000 20px,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */