Question

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

先决条件：

顶部的固定标题
可变高度且上边距
一个贴在页面底部的页脚。不是固定的页脚，而是粘性的之一。

问题： .main的高度因内容而异。在某些窗口宽度（总是取决于.main的可变高度），.footer和窗口底部之间会留有间隙。

目标：我想摆脱.footer下面的差距，我希望.footer能够坚持到底。我希望它坚持，我不希望它被修复。

如果您感到困惑，只需将以下内容粘贴到浏览器中，然后使用窗口宽度来查看我正在谈论的内容。： - ）

<!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;
}

当标题固定且主要有最高保证金时，粘性页脚不起作用？

1 个答案: