無法獲取元素與基於百分比的值排列

Question

我需要創建一個網站，該網站將始終填滿屏幕，因此我使用百分比。

我在上面放置了一個固定的header的10%高度。並且section我給出10%的margin-top。人們會認爲他們會相互衝突，但事實並非如此。會有人想幫忙嗎？

我有以下HTML：

<header></header> 
<section></section> 

與挺的筆直向前一塊的CSS：

html, body { 
    height:100%; 
} 

header, section { 
    width:100%; 
} 

header { 
    height:10%; 
    background:red; 
    position:fixed; 
    top:0; 
    left:0; 
} 

section { 
    background: blue; 
    height:90%; 
    margin-top:10%; 
} 

你可以看到這個活在http://jsfiddle.net/DanielApt/SeJfu/。

Answer 1

可能的解決方案：

從部分刪除margin。只要寫

section { 
    background: blue; 
    height:90%; 
    top:10%; 
    position:relative; 
} 

Here is the fiddle.

Answer 2

section { 
    background: blue; 
    height:90%; 
    margin-top:10%; 
    position:fixed; 
    left: 0; 
} 

應該做的伎倆（即需要用它來固定位置和轉儲左值）

Answer 3

檢查，如果這是你在找什麼http://jsfiddle.net/Mohinder/nj2UB/

HTML

<header></header> 
<section></section> 

CSS

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

header, section { 
    width:100%; 
} 

header { 
    height:10%; 
    background:red; 
    position:fixed; 
    top:0; 
    left:0; 
} 

section { 
    background: blue; 
    height:90%; 
    top:10%; 
    position:relative; 
} 

Answer 4

你必須檢查它解決您的問題。 您從部分刪除「margin」。

HTML

<header></header> 
<section></section> 

CSS

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

header, section { 
    width:100%; 
} 

header { 
    height:10%; 
    background:red; 
    position:fixed; 
    top:0; 
    left:0; 
} 

section { 
    background: blue; 
    height:90%; 
    top:10%; 
    position:relative; 
}