基于滚动的HTML -位置页脚
基于滚动的HTML -位置页脚
提问于 2014-07-04 23:26:56
我有一个<div>，它从上到下填充窗口，除了66 is高的标头。<div>有固定的位置，因此页面的滚动发生在该<div>中，而不是在浏览器窗口中。如果<div>的内容没有从页脚顶部的<div>底部到达56 so，我希望在底部显示页脚。如果内容从<div>的底部达到56 so，并且超过这一点，我希望页脚被部分或完全隐藏，这取决于内容的深度，以及页面底部的滚动显示内容。这听起来有点让人困惑，下面是基本的布局：
How the page should look when the content does not reach the bottom:
页脚保持在窗口底部可见。
How the page should look when the content goes past 56px from the bottom:
页脚被内容部分推开，但当页面向下滚动时将完全显示出来。
How the page should look when the content goes past the bottom:
页脚被完全从屏幕上推开，但当页面向下滚动时会显示出来。
我希望这一切都有意义。我不认为张贴我的代码将是有用的，因为它主要是由图片解释。页眉、页脚和内容都是<div>的，内容<div>是我在这个问题开始时讨论的内容。页眉有固定的位置，在页面滚动时保持在相同的位置。
谢谢，任何帮助都将不胜感激！
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-07-04 23:38:47
以下应该是其中的诀窍：http://ryanfait.com/sticky-footer/
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
height: 155px; /* '.push' must be the same height as 'footer' */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24581641
复制相关文章
相似问题
腾讯云开发者
