底部但不粘的页脚

我正在尝试将页脚刷新到页面的底部，但不一定是粘的 - 只是在底部，以防用户滚动到那里。底部但不粘的页脚

这个“有效”，但在页脚出现后底部似乎有一点空白，看起来有点尴尬。有没有人知道用CSS的最好方法来将页脚刷到底部并将其保持在最底部而不会变粘？

让我知道如果你想我发布我的HTML/CSS。

2014-11-06 Tom Hammond

总是发布您的HTML/CSS，否则我们不能轻松帮你。 – tokyovariable 2014-11-06 02:28:15

实际上，如果您在此处进行简单的“粘脚”搜索，您将获得丰富的知识。粘滞的页脚通常并不意味着_sticky_，因为它会沿着页面向上和向下。通常，当您看到“粘”和“页脚”在一起时，意味着“在页面底部向下推，而下面没有空白空间” – JakeParis 2014-11-06 02:36:51

在网络上有很多很好的例子。

这里是所谓的更新版本：http://mystrd.at/modern-clean-css-sticky-footer/;我没有这方面的经验。

这是经典的版本已经存在了很长一段时间，也被许多：

http://www.cssstickyfooter.com/html-code.html

这里，我已经有好运气的第二个链接我自己有一点不同版本用。

/* Sticky Footer Stuff 
*/ 
html,body { height: 100%; } 
#sticky-wrap { min-height: 100%; } 
.footer { 
    height: 160px; 
    margin-top: -160px; 
} 
/* end sticky footer stuff 
*/ 


<div class="wrapper" id="sticky-wrap"> 
    <div class="content-area”> 
    </div> 
</div> 
<footer> 
</footer>

来源

2014-11-06 02:33:51 JakeParis

这很棒。正是我在找什么！ – 2014-11-06 02:53:43

我有类似的问题。我一直希望页脚处于页面底部，但绝不会与其他div重叠。

我想出了最好的解决办法是：

CSS

#footer { 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
} 
@media screen and (max-height: 700px) { 
    #footer { 
    position: relative; 
    } 
}

HTML

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

这将始终保持在最小高度701px底部的页脚和下方它会在其他div的底部。当然，您可以更改参数并将其设置为您自己的像素测量值。

希望这会有所帮助。

来源

2017-08-22 07:53:33 Haim

底部但不粘的页脚

回答

相关问题