Header 固定且 Main 具有上边距时，粘性页脚不起作用？

Question

请将下面的 HTML 粘贴到您的浏览器中（使用浏览器的控制台 - 最好是 Chrome）以查看我遇到的问题。

先决条件：

固定header在顶部
具有上边距的可变高度主容器
附在页面底部的页脚。不是固定的页脚而是粘性的
一.

问题： .main 的高度会根据其内容而变化。在某些 window 宽度（总是取决于 .main 的可变高度），.footer 和 window 底部之间有一个间隙。

目标：我想摆脱.footer下方的缺口，我希望.footer紧贴底部。我要固定，我不想固定。

如果您感到困惑，只需将下面的内容粘贴到您的浏览器中并调整 window 宽度以了解我在说什么。 :-)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" style="height: 100%;">
  <head>
    <style>
      body {
        margin: 0;
        height: 100%;
      }
      .fixed {
        position: fixed;
        top: 0;
        left: 0;
        height: 100px;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.11);
        z-index: 99999;
        box-sizing: border-box;
        border: 5px solid black;
      }
      .main {
        position: relative;
        border: 5px solid rgb(0, 255, 42);
        box-sizing: border-box;
        width: 100%;
        height: auto;
        line-height: 1.3;
        color: white;
        padding: 45px;
        background-color: green;
        top: 100px;
      }
      .footer {
        width: 100%;
        height: 200px;
        background-color: rgba(255, 0, 0, 1);
        border: 5px solid blue;
        box-sizing: border-box;
        top: 100px;
        position: relative;
      }
    </style>
  </head>
  <body>
    <div class="fixed"></div>
    <div class="main">gaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd fgfyh rtyf tr srtgb srfhgaberrfgherbg rthf strhd</div>
    <div class="footer"></div>
  </body>
</html>

Answer 1

我建议使用 sticky-footer-approach 并添加一个固定的导航栏：

http://jsfiddle.net/L8m54b5t/1/

html

<div class="page-wrap">

    Content!

</div>

<footer class="site-footer">
    I'm the Sticky Footer.
</footer>

css

* {
    margin: 0;
}
html, body {
    height: 100%;
}

.fixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100px;
        background: #eee;
}

.page-wrap {
        padding-top: 100px;
    min-height: 100%;
    margin-bottom: -142px; 
        box-sizing:border-box;
}
.page-wrap:after {
    content: "";
    display: block;
}
.site-footer, .page-wrap:after {
    height: 142px; 
}
.site-footer {
    background: orange;
}

Header 固定且 Main 具有上边距时，粘性页脚不起作用？

Sticky Footer Not Working when Header is Fixed and Main has Top Margin?

html

css

footer

sticky-footer