CSS高度计算不加起来

我有以下代码：CSS高度计算不加起来

<div id="headerwrap"> 
<div id="headertop">aaa</div> 
<div id="headermiddle">abc</div> 
<div id="headerbottom">def</div> 
</div> 
#headerwrap  { position:fixed; top:0; left:0; } 
#headertop  { height:55px; margin:0 auto; } 
#headermiddle { height:25px; margin:0 auto; } 
#headerbottom { height:9px; margin:0 auto; }

我试图遵循一个固定位置的标题。当我这样做时，我发现重叠。检查与萤火虫我发现以下内容：

headerwrap height - 91px 
headertop height - 55px 
headermiddle height - 25px 
headerbottom height - 9px

任何人都可以向我解释为什么数字不加起来？这给我的位置问题，我看不出有什么问题。

为什么55 + 25 + 9合计为91？

来源

2011-05-18 Mimi

我要问，为什么你没有实际的“真实”的数据做你对此有何评论？是否因为你想把所有的东西放在绝对位置？ – gutierrezalex 2011-05-18 04:06:45

我得到89px，这里是demo。

你确定这是所有的CSS，并且在任何元素上都没有边框或额外样式吗？

编辑：只是看到对方的回答:)

来源

2011-05-18 03:57:11 Town

感谢您花时间尝试演示:-) – Mimi 2011-05-18 04:07:09

您确定#headerbottom中的内容不高于9px吗？您可能需要使用overflow-y: hidden;

顺便说一句，与代码，headerwrap应该有相同的高度headertop，它不应该是其他人的总和，因为9 + 25不大于55

来源

2011-05-18 03:51:57 dtbarne

更多看，我找到了我的答案。多么尴尬。导致数字不同的原因是我在headermiddle的顶部和底部有一个1px的边框。看起来像Firebug显示对象的高度，但不包括边框高度。 – Mimi 2011-05-18 03:55:49

CSS高度计算不加起来

回答

相关问题