固定標題與相對高度不一致與邊緣頂部

如果我給我的固定標題和主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/

有人偷解釋爲了這？

來源

2017-03-07 Nathanael Skrepek

餘量-頂部/底部的一個例子：X％或填充-頂部/底部：X％是指母體的寬度：見https://www.w3.org/TR /CSS21/box.html#margin-properties，如果您添加一些摺疊邊緣效果，您可能會首先感到困惑，如果您願意，我可能會將其作爲回覆發佈。 –

我仍然感到困惑......據我所見元素具有相同的父級，這意味着百分比值應該影響相同的絕對值。 –

身高：10％和保證金：10％不一樣。調整窗口大小並查看邊界值的10％更新。設置在絕對或固定位置的元素不在通量範圍內，但你可以在這裏使用：'body：before {content：''; height：10vh; display：block;}'而不是平均margin-top：10％;主要。注意margin-top：10vh;將工作。 https://jsfiddle.net/L7sroo4m/1/ –

GCyrillus給我的提示，現在回答這個問題：

的問題是高度的百分比值指父高度，但上邊距的百分比值指父寬度。

解決方法是不使用百分比值，但使用視口單位x vh，它指的是視口的高度。

換句話說，在我的例子中，只需用10vh代替10%，一切正常。

有視單元 http://www.quirksmode.org/css/units-values/viewport_small.html

來源

2017-03-09 12:22:37

你的HTML和你的身體標記沒有一個特定的高度和寬度，對於初學者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%;}這是不好的做法，因爲頭在身體

來源

2017-03-07 19:56:54

我已經有解決方案在兩個css聲明中使用top，但是這會導致另一個奇怪的結果我的佈局版本。 –

如果您願意，我會幫你解決它們。身份證說我經歷了一點 –

只要你在這裏得到一個問題的答覆 –

固定標題與相對高度不一致與邊緣頂部

回答

相關問題