html - 调整大小时页脚重叠内容

Question

我创建了一个粘性页脚，它似乎停留在页面底部。唯一的问题是，当我通过向上拖动浏览器底部来最小化浏览器时，上面的内容与页脚重叠。当我最小化时，Content div 包含位于页脚顶部的图像。页脚中的类型也会出现在图像上方(最小化时)。任何帮助，将不胜感激。谢谢。

<----- HTML 结构---->

<div class="supercontainer"

    <div class="nav"></div>

    <div class="wrapper">

    <div class="content"></div>
    <div class="push"></div>

    </div>

    </div>

    <div class="footer"></div>

<----- 相关 CSS ----->

.supercontainer {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
  position: relative;
  }

.footer {
   background-color: black;
   width: 100%;
   height: 100px;
 }
  .push {
  height: 100px;
}

Answer 1

要让内容下推页脚，您需要为内容 div 提供与页脚高度匹配的负底边距。

.supercontainer {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -100px;
   position: relative;
  }

.footer {
   background-color: black;
   width: 100%;
   height: 100px;
 }

http://css-tricks.com/snippets/css/sticky-footer/