Html 如何避免未知高度的粘性页脚仅与CSS内容重叠？

我希望HTML元素（例如页脚）绝对位于页面底部，但同时我不希望它在视口较小时与内容重叠（垂直调整浏览器大小以查看问题）。当视口较小时，我希望页脚保持在内容之后，以避免重叠是否有CSS唯一的解决方案？

这里有一把小提琴显示了问题：

内容
带绝对位置的页脚
页脚{
宽度：400px；
背景色：#ccc；
位置：绝对位置；
底部：0；
}

谷歌的主页已经实现了这一点，但我无法理解这是一种仅使用CSS的方法，还是需要JavaScript。下面是谷歌页脚的截图，位置为：绝对

下面是谷歌页脚的截图，它保持在内容之后，不重叠：

谢谢你的帮助。提前谢谢

给页脚一个z索引

指定内容位置：相对、较高的z索引和背景色（这样当页脚在其后面移动时，它就不再可见）

如果希望页脚在与内容碰撞之前消失一点，也可以为内容指定最小高度或填充底部

 .content {    
     position:relative;
     z-index:2;
     background:#FFF;
 }

 footer {
     width: 400px;
     background-color: #ccc;
     position: absolute;
     bottom: 0;
     z-index:1;
 }

我更新了你的小提琴，让你明白我的意思。当页脚与内容碰撞时，它将滑到其下方。 试试这个

HTML

<div class="container">
    <h1>heading</h1>
    <p>My amazing content.</p>
</div>
<footer class="footer">
    <div class="container">
        <p>Footer</p>
    </div>
</footer>

---

以下是

flex

解决方案。浏览器支持：IE 10+

html{
身高：100%；
}
身体{
保证金：0；
最小高度：100%；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-ms-flex方向：列；
-webkit柔性方向：列；
弯曲方向：立柱；
}
主要{
-ms-flex:1；
-webkit-flex:1；
弹性：1；
}
页脚{
背景：银；
/*高度：200px*/
}

main
页脚

要提供另一个选项，您可以使用

calc

为内容提供一个小于页脚高度100%的高度，然后还提供一个

最小高度

，以满足您的需要-无需任何定位

（全屏查看代码段，并调整浏览器大小以查看其运行情况）

*{框大小：边框框；边距：0；}
html，正文{高度：100%；}
主要{
背景：#000；
高度：计算（100%-50px）；
最小高度：300px；
}
页脚{
背景：#ccc；
高度：50px；
}

---

根据Pangloss的答案，您可以在页脚上使用

页边空白顶部：auto

；这样，您就不需要使用

main

元素CSS向下推页脚：

CSS:

HTML:

main或此处的任何其他el
页脚

请随意查看我之前发布的内容，情况非常相似。您可以在小提琴中将60px更改为200px，并调整输出帧的大小，然后查看。@sdcr这是一个很好的解决方案，但它要求页脚有一个固定的高度，页脚的边距与正文底部的边距相同。我想要实现这一点的站点有一个响应的页脚，可以根据视口更改高度（height:auto；）。如果我找不到更好的解决方案，我可能会在媒体查询中使用这种技术来更新高度。我会考虑动态高度，JS呢？这可以让它变得非常简单。@sdcr我知道如何使用JS，我真的想找到一个只使用CSS的解决方案。谢谢谢谢你的努力，但我想让页脚在内容之后可见，而不是隐藏在内容后面。查看谷歌主页了解我的意思。与@sdcr解决方案相同，但感谢您的努力@Nunoaruda不完全是这样，我的解决方案不需要

flex

属性，也不需要使用

vh

单元

flex

不支持IE 9或更低版本，所以这取决于您的需要。我指的是他在问题评论中提出的第一个解决方案：）刚刚发现Bootstrap有一个这种方法的示例：）是的，这是一种常用方法，只需在google上搜索“sticky footer”，就有很多。：）切换<代码>高度：200px用于测试JSFIDLE中的滚动条。当前对flexbox和viewport单元的全局浏览器支持可能会使我不再使用它，但是的，这是一个完美的解决方案：）谢谢@Nunoaruda我添加了另一个同样适用于旧浏览器的解决方案。这是迄今为止实现粘性页脚概念最简单的方法。然而，有一件事我想知道。使用此概念在页脚中放置para时，para垂直粘贴到页脚顶部。我怎么把它放在中间呢？我试图使用“垂直对齐：中间”；但它没有效果。请帮助。@priyamtheone add

display:flex
调整内容：中心和
弯曲方向：列
到
页脚
元素。更新的小提琴：除了在狩猎中，效果很好。
<div class="container">
    <h1>heading</h1>
    <p>My amazing content.</p>
</div>
<footer class="footer">
    <div class="container">
        <p>Footer</p>
    </div>
</footer>

html {
    position: relative;
    min-height: 100%;
}
body {
    /* Margin bottom by footer height */
    margin: 0 0 60px 0;
    padding: 0;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    background-color: #f5f5f5;
}
.container {
    width: auto;
    max-width: 680px;
    padding: 0 15px;
    margin: 20px 0;
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
footer {
  background: silver;
  margin-top: auto;
}

<main>main, or any other el here</main>
<footer>footer</footer>