我目前正在尝试使用我之前在我建立的各种网站上成功使用过多次的粘性页脚。这是链接: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 像素)作为高度(并将包装器底部边距更改为 -400 像素)时，它工作正常。我读到过，当您对高度使用百分比时，它使用的是父元素高度的百分比，并且我需要确保定义了所有祖先元素的高度。我想我确实如此......因为 body 和 html 是页脚的唯一祖先。这实际上就是它的作用。我用像素尺测量了它，页脚和垫片占了我视口(viewport)的 25%。然而天知道为什么，我的浏览器的一侧出现了一个滚动条(是的......它是全屏的)，就好像 body 有一些如何神奇地将自己额外扩展了五十个像素左右。请帮忙，到目前为止，我已经在这上面花了九个小时，到处搜索并尝试了许多不同的策略，但我总是得到相同的结果。为什么百分比没有产生预期的结果？
最佳答案
有很多选项可以解决这个问题。以您现在的方式使用百分比并不是一个好主意。这类似于 this 在 javascript 中的更改方式。
就我个人而言，我会选择响应式方式。
<div class="wrap">
<div class="stuff"></div>
<div class="stuff"></div>
<div class="stuff"></div>
</div>
<div id="footer"></div>
那样，页脚总是设置在其余内容的下方。无需在多个地方指定页脚高度。在此设置中随意使用百分比。
如果您不是 100% 满意它，请使用 jQuery/javascript 来扩展内容。甚至 CSS 媒体查询。
关于css - 当使用高度百分比时，这些额外的像素来自哪里？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15912225/