Question

我目前正在尝试使用我之前在我构建的各种网站上成功使用过多次的粘性页脚。这是链接：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>

正如我之前所说，当我使用特定像素数量（如200px）作为高度（并将包装器边距更改为-400px）时，它可以正常工作。我已经读过，当你使用百分比作为高度时，它使用父元素高度的百分比，并且我需要确保定义所有祖先元素的高度。我想尽管如此......因为身体和HTML是唯一的页脚祖先。这实际上就是它的作用。我用像素标尺测量它，页脚和间隔测量到我视口的25％。然而，对于上帝知道为什么，我的浏览器侧面会出现一个滚动条（是的......它是全屏），好像身体有一些神奇地延伸了50多个像素。请帮帮忙，到目前为止，我已经花了9个小时，全身心地搜索并尝试了许多不同的策略，但我总能得到相同的结果。为什么百分比不会产生预期的结果呢？

Answer 1

有很多选择可以解决这个问题。以你的方式使用百分比不是一个好主意..它类似于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媒体查询。

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

1 个答案: