Question

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

从长远来看，我甚至希望如果窗口重新调整大小，可滚动内容区域的高度可以重新调整大小，但我已经领先于自己了。我假设我需要CSS和Javascript的组合才能实现这一点，单靠CSS无法实现它？

我当然已经研究过并且发现了CSS溢出属性，但我的CSS一般不是很好:(下面是一些CSS / HTML我根据ryanfait.com的粘性页脚教程拼凑在一起，如果有人可以给我一些建议，以此作为起点。请记住，我需要直接的Javascript，而不是jQuery，因为这将用于自定义浏览器（http://tkhtml.tcl.tk/hv3.html）。我的Javascript与我的CSS不同，虽然非常好，所以将特定的CSS建议与一般的Javascript建议（我将会充实）结合起来的答案将是理想的。

<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

Answer 1

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

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

Answer 2

在页脚div使用位置固定，底部0如：

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

Answer 3

如果要在页脚上使用固定高度，可以执行以下操作

.wrapper{
     overflow-y:scroll;
     height:calc(100% - 20px);
}

.footer {
    position:static;
    bottom: 0;
    height: 20px;
}

请注意，您需要使用此处的空格“100％ - 20px”才能使其正常工作。

粘性页脚，以及没有特定高度的滚动div

3 个答案: