CSS 自动高度和粘性页脚
我正在尝试了解 CSS 定位指南。我正在尝试弄清楚如何制作粘性页脚，但当主要内容区域无法再压缩时，使其不再粘性。我所说的示例可以在这里找到 http://ryanfait.com/sticky-footer/< /a>.有人可以向我解释为什么页脚不再粘性，特别是哪些 CSS 属性会导致这种情况发生吗？对我来说，当我查看 CSS 时，页脚似乎应该始终粘在浏览器窗口的底部，但这里的情况并非如此。为什么？
感谢您的帮助。
I'm trying to wrap my head around CSS positioning guidelines. I'm trying to figure out how to make a sticky footer but have it stop being sticky when the main content area can no longer be condensed. An example of what I'm talking about can be found here http://ryanfait.com/sticky-footer/. Can someone explain to me why the footer stops being sticky and particularly what CSS properties cause this to occur? For me, as I look at the CSS it looks like the footer should just stay sticky to the bottom of the browser window always, but this isn't the case here. Why?
Thanks for the help.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
尝试一下这个。
http://www.cssstickyfooter.com/（链接不再有效）
它与 Ryan 的类似，但是，从记忆中，我认为我在这方面运气更好（尽管两者非常相似）。
Give this one a try.
http://www.cssstickyfooter.com/ (link no longer valid)
It is similar to Ryan's one but, from memory, I think I've had better luck with this (although both are very similar).
您必须在包装器外部声明页脚，并为页脚提供一些
height，而 margin-top 应该-(footer-height)pxYou have to declare the footer outside of the wrapper and give some
heightfor footer and margin-top should-(footer-height)px以下是我经常使用的布局的简要摘要，作为需要粘性页脚的项目的基础。不确定我最初从哪里获得所有代码，但它们是经过相当长一段时间拼凑而成的。
http://jsfiddle.net/biznuge/thbuf/8/
你应该能够看到从小提琴来看，您需要一个“#container”元素来包裹整个页面。这给你 100% 的高度（注意 css 中存在的 ie 的 hack），并允许这个“容器”元素的子元素导出高度或相对于它的位置。
这种方法的缺陷是：
元素，使页脚比自然位置移动得更远
会，所以需要至少了解页脚的广泛内容
高度应该是。
如果您只调整浏览器底部边缘的大小，则会发生事件，所以在
在这种特殊情况下，粘性会失败，直到水平
resize 也作为一个事件呈现。
约束不在“#container”元素上，而是在“#page”上
元素，也许还可以在“#footer”下面引入额外的元素
在那里提供任何宽度限制。
祝你好运！
Here's a brief summary of a layout I use fairly consistently as a basis for projects that require a sticky footer. Not sure where I initially got all the code from but it was pieced together over quite a while.
http://jsfiddle.net/biznuge/thbuf/8/
You should be able to see from the fiddle that you require a '#container' element which will wrap the whole of the page. this gives you 100% height (note the hacks for ie present in the css), and allows and child elements of this 'container' element to derive a height, or position relative to it.
Pitfalls of this method are:
element so that the footer is displaced further than it naturally
would, so need to know at least a broad range of what your footer
height should be.
events if you only resize the bottom edge of the browser, so in
that particular case the stickiness would fail, until a horizontal
resize was also presented as an event.
constraint not on the '#container' element, but on the '#page'
element, and perhaps introduce extra elements beneath '#footer' to
provide any width constraints there.
Good Luck!