相対的な高さのマージンが不揃いの固定ヘッダー

Question

固定ヘッダーとメインdivにパーセンテージの値を与えると、何か変なことが起こります。

ヘッダーの高さの値として50pxを使用し、メインエリアの余白として50pxを使用すると、すべて正常に動作します。

しかし、私はこれらの値は10%になりたいときに、ヘッダーとメインの間に矛盾の距離があります：

header { 
 
    position: fixed; 
 
    display: block; 
 
    top: 0px; 
 
    left: 0px; 
 
    right: 0px; 
 
    height: 10%; 
 
    background-color: green; 
 
} 
 

 
main { 
 
    margin-top: 10%; 
 
    background-color: blue; 
 
}

<header> 
 
    My Header 
 
</header> 
 
<main> 
 
    Mainarea here! 
 
</main>

jsfiddle：https://jsfiddle.net/azizn/L7sroo4m/

は誰かに説明を持っていますこのため？あなたのhtmlとあなたの体のタグは、特定の高さと幅を持っていない

Answer 1

GCyrillusは今、これに答えるために私にヒントを与えた：

問題は、高さのパーセント値は、親の高さを意味しますがマージントップのパーセント値は、親の幅を参照していることです。

解決策はパーセント値を使用せず、ビューポートの高さを参照するビューポート単位x vhを使用することです。

つまり、私の例では10%を10vhと置き換えても問題ありません。 x％またはパディングトップ/ボトム：ビューポートユニット

http://www.quirksmode.org/css/units-values/viewport_small.html

Answer 2

、スタータ用のuが、この追加する必要があります。

html, body{ 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 

をここに完全なCSSです：

html, body{ 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 
header { 
    position: fixed; 
    display: block; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    height: 10%; 
    width: 100%; 
    background-color: green; 
} 
main { 
    position: absolute; 
    display: block; 
    top: 10%; 
    width: 100%; 
    background-color: blue; 
}  

私はメインposition: absoluteを作成し、余白の代わりに先頭に付けました。ヘッダが本体にあるため、body{height: 90%;}を実行しない限り、マージンがボトムにオーバーフローします。