Layout CSS自动高度和粘性页脚

我正试着围绕CSS定位准则来思考。我正试图找出如何制作一个粘性页脚，但当主内容区域不能再压缩时，让它停止粘性。我所说的例子可以在这里找到。有人能给我解释一下为什么页脚不再粘滞，特别是什么CSS属性导致了这种情况？对我来说，当我查看CSS时，页脚看起来应该始终粘在浏览器窗口的底部，但这里不是这样。为什么?

---

谢谢您的帮助。

您必须在包装器外部声明页脚，并为页脚和页边顶部提供一些

高度

，页脚高度应

-（页脚高度）px

<div id="wrapper">
  ---
 ------
</div>
<div id="footer">
</div>

# wrapper {
width:100%;
height:100%;
}
#footer {
width:100%;
height:25px;
margin:-25px 0px 0px 0px;
background:#ccc;
}

---
------
#包装纸{
宽度：100%；
身高：100%；
}
#页脚{
宽度：100%；
高度：25px；
利润率：-25px 0px 0px 0px；
背景：#ccc；
}

您必须在包装外声明页脚，并为页脚和页边顶部提供一些

高度

，页脚高度应

-（页脚高度）px

<div id="wrapper">
  ---
 ------
</div>
<div id="footer">
</div>

# wrapper {
width:100%;
height:100%;
}
#footer {
width:100%;
height:25px;
margin:-25px 0px 0px 0px;
background:#ccc;
}

---
------
#包装纸{
宽度：100%；
身高：100%；
}
#页脚{
宽度：100%；
高度：25px；
利润率：-25px 0px 0px 0px；
背景：#ccc；
}

试试这个。 （链接不再有效）

它与Ryan的类似，但根据记忆，我认为我在这方面运气更好（尽管两者非常相似）。

试试这个。 （链接不再有效）

---

它与Ryan的布局相似，但根据记忆，我认为我在这方面运气更好（尽管两者非常相似）。

以下是一个简短的布局摘要，我一直使用它作为需要粘性页脚的项目的基础。不确定我最初从哪里获得所有代码，但它是经过一段时间拼凑而成的

您应该能够从小提琴中看到，您需要一个“#container”元素来包装整个页面。这将为您提供100%的高度（注意css中存在的ie漏洞），并允许此“容器”元素的子元素派生高度，或相对于它的位置

这种方法的缺点是：

• 您需要在“#main”的底部提供一些填充/边距 元素，使页脚移动得比其自然移动得更远 因此，您至少需要了解您的页脚的大致内容 高度应该是

---

• IE似乎不是（这里是一个简短的布局摘要，我一直使用它作为需要粘性页脚的项目的基础。不确定我最初从哪里获得所有代码，但它是经过一段时间拼凑而成的
  你应该能够从小提琴上看到你需要一个“#container”元素，它将包裹整个页面。这将为你提供100%的高度（注意css中ie的漏洞），并允许这个“container”元素的子元素和子元素派生一个高度，或相对于它的位置
  这种方法的缺点是：
  • 您需要在“#main”的底部提供一些填充/边距 元素，使页脚移动得比其自然移动得更远 因此，您至少需要了解您的页脚的大致内容 高度应该是

  ---

  • 我看起来不太舒服（请提供一些代码，因为你链接的网站已经关闭了。哈哈-那是6年半以前的事了！你对链接不再有效感到惊讶吗？就像前端开发中的所有东西一样，它已经被Flexbox和CSS grid等新技术所取代。所以重新发布旧代码没有意义！是的，很好，但是atlea尽管旧的代码逻辑已经过时/不再有效，但它可能会给出一个提示。从社区的角度来看，让真正的代码作为答案比链接更有意义。@swisstony进行编辑以便我可以向上投票：）请提供一些代码，因为你链接的网站已经关闭了。哈哈-那是6年半以前的事了！你对链接不再有效感到惊讶吗？就像前端开发中的所有东西一样，它已经被Flexbox和CSS grid等新技术所取代。因此，重新发布旧代码没有意义！是的，这很好，但至少是这样t即使旧的代码逻辑已经过时/不再有效，也可以给出提示。从社区的角度来看，让真正的代码作为答案比链接更有意义。@swisstony进行编辑，以便我可以向上投票：）