css - 无法让元素与基于百分比的值对齐

Question

我需要创建一个始终填满屏幕的网站，因此我使用的是百分比。

我在顶部放置了一个固定header的10%高度。和一个section我给一个margin-top。10%人们会认为他们会互相冲撞，但事实并非如此。有人愿意帮忙吗？

我有以下 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;
}

这是小提琴。

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

你已经检查它解决了你的问题。您从部分中删除“边距” 。

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;
}