使用高度百分比时，这些额外像素来自哪里？

我目前正在尝试使用粘贴页脚，我已经成功地使用了多次，之前我已经创建了各种网站。这里是链接：http://ryanfait.com/sticky-footer/使用高度百分比时，这些额外像素来自哪里？

这次的问题是，我试图让这个更响应，因此我不想使用一个特定的像素量的高度，所以我试图切换到百分比：

html, body { 
    height: 100%; margin: 0px; padding: 0px; 
} 

#wrapper{ 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin-bottom: -25%; 
    background: lime 
} 

#spacer{ 
    background: blue; 
    height: 25%;    /* This should be exactly the same as #footer height. */ 
} 

#footer{ 
    background: magenta; 
    height: 25%; 
}

这里是HTML：

<!DOCTYPE html"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 

     <link href="https://localhost/wordpress/wp-content/themes/TesterTheme/style.css" rel="stylesheet" type="text/css" /> 

    </head> 

    <body> 
     <div id="wrapper"> 

Content goes here. 

</div><!-- End Wrapper --> 

<div id="spacer"></div> 

<div id="footer"> 
</div> 

</body> 
</html>

正如我以前说过，当我使用一个特定的像素数量，比如200像素，对于高（和改变包装下边距来-400px ）它工作正常。我已经读过，当你使用高度的百分比时，它使用了父元素高度的百分比，我需要确保定义所有祖先元素的高度。我认为我尽管...因为body和html是页脚的唯一祖先。这实际上是它所做的。我用一个像素尺测量了它，页脚和隔离片测量了我观看端口的25％。然而，因为上帝知道为什么，我的浏览器侧面出现了一个滚动条（是的......它是全屏），就好像身体有一些神奇地将自己延长了五十个像素左右。请大家帮忙，我已经花了九个小时到目前为止，全面搜索并尝试许多不同的战术，但我总是得到相同的结果。为什么百分比不能达到预期的结果？

来源

2013-04-09 Digital Brent

请注意：我已经在Chrome，FF，IE中试过了，它们都给出了相同的结果。 – 2013-04-09 20:57:57

它的'margin-bottom：-25％;'这会导致页脚和spacer之间的高度差异。当使用带有margin的百分比时，它始终相对于元素的** width **，即使您'重新使用上下边距 – Adrift 2013-04-09 20:58:17

那么，我如何让百分比等于高度呢？另外我不确定你的意思是有什么区别。我的描述可能不够清楚。页脚和间隔符的高度相同：204px。我的视口是814px。即使我将包装底边改为-50％，body和html仍然会出现814，但footer仍然比firebug说身体结束的位置低50个像素。 – 2013-04-09 21:05:18

有很多选项可以解决这个问题。以你所使用的方式使用百分比并不是一个好主意..它类似于this可以在javascript中更改。

就我个人而言，我会走这条路线作出回应。

<div class="wrap"> 
    <div class="stuff"></div> 
    <div class="stuff"></div> 
    <div class="stuff"></div> 
</div> 
<div id="footer"></div>

这样，页脚始终设置为低于其余内容。无需在多个位置指定页脚高度。使用这个设置你喜欢百分比。

如果您对此不满意，请使用jQuery/javascript来展开内容。甚至是CSS媒体查询。

来源

2013-04-09 21:08:37

谢谢，我不太清楚你最初的意思，但我最终所做的只是给内容打分75％的高度，然后给了页脚25％的高度。这似乎工作正常。现在看起来很明显。我无法相信我浪费了太多时间来试图让愚蠢的事情发挥作用。 – 2013-04-10 15:27:02

它发生在我们身上。最主要的是永远不会放置更多的代码。始终从顶层向下层叠。 CSS只做很多事情，那么现在是时候研究javascript并确保它正确地回退。快乐的编码！ – 2013-04-10 15:40:01

使用高度百分比时，这些额外像素来自哪里？

回答

相关问题