Question

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

我将header高度固定在10%的顶部。 section margin-top我10% <header></header> <section></section>。人们会认为他们会相互冲突，但事实并非如此。有人想帮忙吗？

我有以下HTML：

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

有一个非常简单的css：

{{1}}

您可以在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;
}

无法使元素与基于百分比的值对齐

4 个答案: