固定标题与相对高度不一致与边缘顶部

如果我给我的固定标题和主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，但是这会导致另一个奇怪的结果我的布局版本。 –

如果您愿意，我会帮你解决它们。身份证说我经历了一点 –

只要你在这里得到一个问题的答复 –

固定标题与相对高度不一致与边缘顶部

回答

相关问题