0

我目前正在尝试使用我之前在我建立的各种网站上成功使用过多次的粘性页脚。这是链接：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 是页脚的唯一祖先。这实际上就是它的作用。我用像素尺测量了它，页脚和分隔符测量到我视口的 25%。然而，天知道为什么，我的浏览器旁边出现了一个滚动条（是的......它是全屏的），好像身体有一些神奇地延长了自己额外的五十个像素左右。请帮忙，到目前为止我已经花了九个小时，到处搜索并尝试许多不同的策略，但我总是得到相同的结果。为什么百分比没有产生预期的结果？

4

1 回答 1

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 媒体查询。

于 2013-04-09T21:08:37.667 回答