父項中的頁邊空白，子項中的頁頂空白，如何清除下面的剩余高度

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