Question

我正在尝试在我的网站上放置粘性页脚。不管是“滚动到窗户的底部，无论你滚动多少”都是粘性的，但是“无论页面有多长，页脚都会在你的窗口底部，只要你一直向下滚动”粘性页脚

我尝试过在网络上实现4-5个不同的版本，但我遇到了一个问题：

每当我的页面小于用户浏览器的高度时，页面将在内容之后，在页脚之前添加大约100px，然后您将看到您的页面，一个很大的空白区域，然后如果你向下滚动页脚。

以下是遇到问题的页面：https://elcheapohost.com/contact

所以这是代码的缩短版本：

<head>...snip...</head>
<div id="wrap">Content Here</div>
</div><!-- /wrap--><div id="foot">
<footer>
        <div class=" copyright">&copy; Copyright <?php echo date('Y'); ?> <a href="http://www.joshuapedroza.com">Joshua Pedroza</a>. All Rights Reserved. <a href="/tos">Terms of Service</a>.</div>
</footer><!-- End  footer  --></div> <!-- /foot -->

和css：

html, body {
    height:100%;/* needed to base 100% height on something known*/
}
#wrap {
    margin:auto;
    min-height:100%;
    padding-top:-48px;/*footer height - this drags the outer 40px up through the top of the monitor */

}
* html #wrap {
    height:100%
}
#foot {/* footer now sits at bottom of window*/
    padding-top: 35px;
    margin:auto;
    height:48px;/* must match negative margin of #wrap */
    clear:both;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
#wrap:after {/* thank you Erik J - instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}

我不确定这是否是Twitter引导问题，因为我过去曾遇到过同样的问题。还有其他人遇到过吗？

页面示例：内容更长：http://gyazo.com/a03348451474ad62e3250273cfe474de 内容更短：http://gyazo.com/8221af4593dd58f98cedebd5670e4e8a（无论页面有多短，它都会在该滚动条中添加）

Answer 1

从

中删除

padding-top:35px

来自/ #foot

在stick_footer.css中

和

margin-top:35px

来自页脚

in styles.css

页脚和内容底部之间不再有空格。如果这不是你的答案让我知道，我可以深入挖掘。

Answer 2

你能做截图并用网址标记页面，这样我才能看到它。

编辑：我在计算机上看不到这种情况。我已经针对我拥有的所有浏览器检查了屏幕截图中的页面。您使用的是哪种浏览器？

如果页面比窗口短，则未知div将页面长度添加到页面

2 个答案: