親のマージントップ、子供のネガティブトップ、残った高さを取り除く方法

Question

私は白い背景を必要とするデザインがありますが、トップ100pxはバックグラウンドなしにする必要があります。だから私がやったことは、白い背景を持つ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 */