javascript - 粘性页脚,带有没有特定高度的滚动 div

  显示原文与译文双语对照的内容
0 0

我想要一个页脚的页面,我希望内容 上面 能够滚动,同时保持页脚的粘性。 但是我不想硬编码内容区域的高度,而是希望它的高度为所有可用的高度,除了footer的高度。

在长时间内,如果窗口重新调整大小,我甚至想要大量的滚动内容区域。 我相信我需要一个CSS和Javascript组合来实现这个,单独的CSS无法实现它。

我已经研究过并且找到了 CSS overflow 属性,但是我的CSS一般不很好:( below 是一些基于 ryanfait.com's的脚本。 我希望我的Javascript和CSS不同,但这将是理想的选择,将特定CSS建议与CSS建议结合起来。


<html>
 <head>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto!important;
height: 100%;
margin: 0 auto -4em;
}
.footer,. push {
height: 4em;
}
</style>
 </head>
 <body>
 <div class="wrapper">
 <p>Your website content here.</p>
 <div class="push"></div>
 </div>
 <div class="footer">
 <p>Copyright (c) 2008</p>
 </div>
 </body>
</html>

编辑:我在前两个答案中尝试了:

我已经根据目前接收到的两个答案的部分对CSS进行了以下修改:


<style>
* {
 margin: 0;
}
html, body {
 height: 100%;
}
.wrapper {
 min-height: 100%;
 height: auto!important;
 height: 100%;
 margin: 0 auto -4em;
 overflow-y: scroll;
}
.footer {
 bottom: 0;
 height: 4em;
 position: fixed;
}
</style>

在这个示例中,我使用了两个滚动条,一个非常微弱的滚动条,但仍然允许内容溢出包装区域之外的内容,而在整个页面的顶部加上。 感谢你帮助进步,但我仍然需要相当多的帮助。 下面是我看到的屏幕截图的链接;我使用 http://www.ipsum-generator.com/插件来生成所有内容。

http://dl.dropbox.com/u/44728447/dynamic_wrapper_sticky_footer.JPG

时间: 原作者:

0 0

html, body {
 height:100%;
 overflow:hidden;
}
.wrapper {
 overflow-y:scroll;
 height: 90%;
}
.footer {
 position:static;
 bottom: 0;
 height: 10%;
}

演示:http://jsfiddle.net/vfSM3/

原作者:
0 0

在页脚div使用位置固定和底部 0类似:


.footer {
 bottom: 0;
 height: 4em;
 position: fixed;
}

...