ページの上にdivを作成

Question

私はHTMLとCSSのウェブサイトで作業しています。

@font-face { 
 
    font-family: NS; 
 
    src: url(https://cdn.getforge.com/rappatic.getforge.io/1513714024/fonts/nsr.ttf); 
 
} 
 

 
@font-face { 
 
    font-family: PS; 
 
    src: url(https://cdn.getforge.com/rappatic.getforge.io/1513714024/fonts/psr.ttf); 
 
} 
 

 
@font-face { 
 
    font-family: KR; 
 
    src: url(https://cdn.getforge.com/rappatic.getforge.io/1513714024/fonts/kr.ttf); 
 
} 
 

 
@font-face { 
 
    font-family: ANR; 
 
    src: url(https://cdn.getforge.com/rappatic.getforge.io/1513714024/fonts/anr.otf) 
 
} 
 

 
body { 
 
    /*background: linear-gradient(to top right, #FFE259, #FFA751, #FFAF7B); 
 
    background-attachment: fixed;*/ 
 
    width: 100%; 
 
    margin: auto; 
 
    height: 100%; 
 
} 
 

 
p { 
 
    font-family: "ns"; 
 
} 
 

 
h1 { 
 
    font-family: "anr"; 
 
} 
 

 
.white { 
 
    color: #ffffff; 
 
} 
 

 
.black { 
 
    color: #000000; 
 
}

<div style="width: 100%; background: linear-gradient(to top right, #FFE259, #FFA751, #FFAF7B); background-attachment: fixed;"> 
 
    <div style="width: 70%; margin: 3% 15% 0 15%;"> 
 
    <h1 class="white" style="font-size: 60px; font-family: KR !important;">Hi, I'm rappatic.</h1> 
 
    <p class="white" style="font-size: 30px; font-family: KR !important; line-height: .0em;">I code when I feel like it.</p> 
 
    <br> 
 
    <div>

あなたが見ることができるように、DIVの上に白いバーがあります。背景の色を変更すると、白いバーが実際に背景の一部であることが確認されます。 divのページの上に滞在する方法はあります、白いバーが消えますか？

Answer 1

「空白」は実際に<h1>タグから来ています。paddingの親には大きすぎます<div>です。

代わりのpadding、あなたは実際に代わり<div>にmarginを設定するために探しています。 marginは適用される要素をオフセットしますが、paddingは任意の子要素（たとえば<h1>）をオフセットし、paddingの要素は変更しません。これは、box modelで見ることができます。

は単にpadding問題を解決するためのmarginを交換します。

最後に</div></div>の代わりに<div>があることにも注意してください。これが原因で、子のdiv <div style="width: 70%; margin: 3% 15% 0 15%;">

に設定されたマージンで起こる

@font-face { 
 
    font-family: NS; 
 
    src: url(https://cdn.getforge.com/rappatic.getforge.io/1513714024/fonts/nsr.ttf); 
 
} 
 

 
@font-face { 
 
    font-family: PS; 
 
    src: url(https://cdn.getforge.com/rappatic.getforge.io/1513714024/fonts/psr.ttf); 
 
} 
 

 
@font-face { 
 
    font-family: KR; 
 
    src: url(https://cdn.getforge.com/rappatic.getforge.io/1513714024/fonts/kr.ttf); 
 
} 
 

 
@font-face { 
 
    font-family: ANR; 
 
    src: url(https://cdn.getforge.com/rappatic.getforge.io/1513714024/fonts/anr.otf) 
 
} 
 

 
body { 
 
    /*background: linear-gradient(to top right, #FFE259, #FFA751, #FFAF7B); 
 
    background-attachment: fixed;*/ 
 
    width: 100%; 
 
    margin: auto; 
 
    height: 100%; 
 
} 
 

 
p { 
 
    font-family: "ns"; 
 
} 
 

 
h1 { 
 
    font-family: "anr"; 
 
} 
 

 
.white { 
 
    color: #ffffff; 
 
} 
 

 
.black { 
 
    color: #000000; 
 
}

<div style="width: 100%; background: linear-gradient(to top right, #FFE259, #FFA751, #FFAF7B); background-attachment: fixed;"> 
 
    <div style="width: 70%; padding: 3% 15% 0 15%;"> 
 
    <h1 class="white" style="font-size: 60px; font-family: KR !important;">Hi, I'm rappatic.</h1> 
 
    <p class="white" style="font-size: 30px; font-family: KR !important; line-height: .0em;">I code when I feel like it.</p> 
 
    <br> 
 
    </div> 
 
</div>

Answer 2

あなたはmargin: 0% 15% 0 15%;

かを試すことができます：私は下の私の例でこれを修正しました親divをposition:realtive 、子divをposition: absolute;

に設定します

<div style="position: relative;width: 100vw;height: 80vh;background: linear-gradient(to top right, #FFE259, #FFA751, #FFAF7B);background-attachment: fixed;"> 
    <div style="width: 70%;position: absolute;margin: 3% 15% 0 15%;<div style=&quot;width: 70%; margin: 3% 15% 0 15%;&quot;>;<div style=&quot;width: 70%; margin: 3% 15% 0 15%;&quot;>;"> 
    <h1 class="white" style="font-size: 60px;font-family: KR !important;">Hi, I'm rappatic.</h1> 
    <p class="white" style="font-size: 30px; font-family: KR !important; line-height: .0em;">I code when I feel like it.</p> 
    <br> 
    </div> 
</div> 

これはの2番目のオプションを使用して確認できます。

** 2番目のオプション（位置を使用）では、親divの高さを設定する必要があるため、子divの高さも同じになります（これは子が親に対して絶対であるためです）。position:realtive