header用了fixed属性以后，后面的块级元素怎么无缝衔接？

Question

问题：布局一共就2块，上面是header，下面是section做container，放其余的东西。都用的百分比布局，具体这么写的
代码：

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0">
 html,body{
            height:100%;
        }
*{
    margin: 0;
    padding: 0;
}
      .header  {
    background-color: rgb(0,108,209);
    height:15%;
    width:100%;
    position: fixed;
          top:0;

}

     .section{
            padding-top: 25%;
            color: red;
        }

最后写出来要么header和section有空隙要么重叠。所以那个section的padding-top怎么设置才好呢？
第一次修改：发现用px做单位就可以，那么为什么用百分比不可以呢？

Answer 1

你的header,height:15%.下面的section 应该padding-top:15%

Answer 2

header写一个同级的块级元素，把他的高和header设置一样就可以了！这样就吧header fixed后留下空当的填上。

Answer 3

你给section{padding-top:15%;}就可以了；和上面的header刚好重合。就没有问题了。

Answer 4

其他不变

.section{
            margin-top: 15%;
            background: #afa;
            min-height:100px;
        }

这样就是无缝拼接了,用margin代替padding