javascript 粘性页脚，以及没有特定高度的滚动 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7747802/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sticky footer, along with scrolling div without specific height
提问by Dexygen
I'd like a page with a sticky footer, and I'd like the content above it to be scroll-able, while maintaining the stickiness of the footer. But I don't want to hard-code the height of the content area, but instead would like its height to be all the available height exceptfor the height of the footer.
我想要一个带有粘性页脚的页面，并且我希望它上面的内容可以滚动，同时保持页脚的粘性。但我不想硬编码内容区域的高度，而是希望它的高度是除页脚高度之外的所有可用高度。
In the long run I would even like for the height of the scroll-able content area to be re-sizable if the window is re-sized, but I'm getting ahead of myself. I'm presuming I'm going to need a combination of CSS and Javascript to acheive this, that CSS alone cannot acheive it?
从长远来看，如果窗口重新调整大小，我什至希望可滚动内容区域的高度重新调整大小，但我已经超越了自己。我假设我将需要 CSS 和 Javascript 的组合来实现这一点，仅靠 CSS 无法实现它？
I've researched of course and have found the CSS overflow property, but my CSS in general is not very good :( Below is some CSS/HTML I've cobbled together based on ryanfait.com's sticky footer tutorial, if somebody can give me some advice using this as a starting point. Bear in mind, I will need straight Javascript, not jQuery, as this will be used in a custom browser (http://tkhtml.tcl.tk/hv3.html). My Javascript unlike my CSS though is pretty good, so an answer combining specific CSS suggestions with general Javascript suggestions (which I will then flesh out), would be ideal.
我当然已经研究过并发现了 CSS 溢出属性，但我的 CSS 总体上不是很好:( 下面是我根据 ryanfait.com 的粘性页脚教程拼凑的一些 CSS/HTML，如果有人可以给我的话以此为起点的一些建议。请记住，我将需要直接的 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>
EDIT: What I've attempted based on first two answers:
编辑：我根据前两个答案所做的尝试：
I've made the following modifications to the CSS based on parts of the two answers received so far:
我根据目前收到的两个答案的一部分对 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>
What this gives me in Chrome are twoscrollbars, one very faint, but the more prominent one still allowing content that overflows (maybe I'm using the term incorrectly?) outside of the wrapper area, and over the top (or under the bottom) of the footer, plus outside the entire body. Thanks for help making progress but I still need quite a bit of help. Here's a link to a screenshot of what I'm seeing; I used http://www.ipsum-generator.com/to generate all the content.
这在 Chrome 中给我的是两个滚动条，一个非常微弱，但更突出的一个仍然允许内容溢出（也许我使用的术语不正确？） ) 的页脚，加上整个身体之外。感谢您帮助取得进展，但我仍然需要很多帮助。这是我所看到的截图的链接；我使用http://www.ipsum-generator.com/生成所有内容。
http://dl.dropbox.com/u/44728447/dynamic_wrapper_sticky_footer.JPG
http://dl.dropbox.com/u/44728447/dynamic_wrapper_sticky_footer.JPG
采纳答案by AlienWebguy
html, body {
height:100%;
overflow:hidden;
}
.wrapper {
overflow-y:scroll;
height: 90%;
}
.footer {
position:static;
bottom: 0;
height: 10%;
}
回答by Gadget Blaster
On the footer div use position fixed and bottom 0 like:
在页脚 div 上使用位置固定和底部 0 像：
.footer {
bottom: 0;
height: 4em;
position: fixed;
}
回答by J1mak0s
If you want to use fixed height on the footer, you could do the following
如果要在页脚上使用固定高度，可以执行以下操作
.wrapper{
overflow-y:scroll;
height:calc(100% - 20px);
}
.footer {
position:static;
bottom: 0;
height: 20px;
}
Note that you need to use the spaces here "100% - 20px" in order for it to work.
请注意，您需要使用此处的空格“100% - 20px”才能使其工作。
