Html 页眉固定且主页眉有上边距时，粘性页脚不起作用？_Html_Css_Footer_Sticky Footer

Html 页眉固定且主页眉有上边距时，粘性页脚不起作用？

html css

Html 页眉固定且主页眉有上边距时，粘性页脚不起作用？,html,css,footer,sticky-footer,Html,Css,Footer,Sticky Footer,请将下面的HTML粘贴到您的浏览器中（使用浏览器的控制台-最好是Chrome），查看我遇到的问题先决条件：顶部的固定收割台高度可变的主容器，顶部留有边距粘在页面底部的页脚。不是固定的页脚，而是粘性的一个问题：根据其内容，.main的高度会有所不同。在某些窗口宽度下（始终取决于.main的可变高度），.footer与窗口底部之间留有间隙目标：我想消除.footer下面的空白，我想.footer贴到底。我希望它粘在一起，我不希望它被修复如果您感到困惑，只需将下面的内容粘贴到浏览器

请将下面的

HTML

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

先决条件：

顶部的固定收割台
高度可变的主容器，顶部留有边距
粘在页面底部的页脚。不是固定的页脚，而是粘性的
一个

问题：根据其内容，

.main

的高度会有所不同。在某些窗口宽度下（始终取决于

.main

的可变高度），

.footer

与窗口底部之间留有间隙

目标：我想消除

.footer

下面的空白，我想

.footer

贴到底。我希望它粘在一起，我不希望它被修复

如果您感到困惑，只需将下面的内容粘贴到浏览器中，并调整窗口宽度，看看我在说什么。：-）


身体{
保证金：0；
身高：100%；
}
.固定{
位置：固定；
排名：0；
左：0；
高度：100px；
宽度：100%；
背景色：rgba（0,0,0,0.11）；
z指数：99999；
框大小：边框框；
边框：5px纯黑；
}
梅因先生{
位置：相对位置；
边框：5px实心rgb（0,255,42）；
框大小：边框框；
宽度：100%；
高度：自动；
线高：1.3；
颜色：白色；
填充：45px；
背景颜色：绿色；
顶部：100px；
}
.页脚{
宽度：100%；
高度：200px；
背景色：rgba（255,0,0,1）；
边框：5px纯蓝色；
框大小：边框框；
顶部：100px；
位置：相对位置；
}
加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔加伯尔srfhgaberrfgherbg rthf rtyf tr srtgb srfhgaberrfgherbg rthf rtyf tr srtgb srfhgaberrfgherbg RTHFY rtyf tr srtgb srfhgaberrfgherbg RTHFY RTHFY rtyf tr srtgb srfhgaberrfgherbg RTHFY RTHFY RTHFY rtyf tr srtgb SRFHGABERRFGHERBR RTHFY RTHFY rtyf tr srtgb SRFHGABERRFGHERB RTHFG RTHFY rtyf rtyf tr srtgbsrfhgaberrfgherbg rthf rtyf tr srtgb srfhgaberrfgherbg rthf rtyf tr srtgb srfhgaberrfgherbg RTHFY rtyf tr srtgb srfhgaberrfgherbg RTHFY RTHFY rtyf tr srtgb srfhgaberrfgherbg RTHFY RTHFY RTHFY rtyf tr srtgb SRFHGABERRFGHERBR RTHFY RTHFY rtyf tr srtgb SRFHGABERRFGHERB RTHFG RTHFY rtyf rtyf tr srtgbsrfhgaberrfgherbg rthf rtyf tr srtgb srfhgaberrfgherbg rthf RTRHD FGFYF tr srtgb srfhgaberrfgherbg RTHFY rtyf tr srtgb srfhgaberrfgherbg RTHFY rtyf tr srtgb srfhgaberrfgherbg RTHFY RTHFY RTHFY tr srtgb SRFHGABERRFGHERBR RTHFY RTHFY RTHFY tr srtgb SRFHGABERRFGHERB RTHFY RTHFY RTHFY tr

我建议使用并添加固定导航栏：

html

如果您查看JSFIDLE，您会发现它不起作用。812px限制是在浏览器而不是JSFIDLE上进行测试时使用的。我将删除我的JSFiddile以防止进一步混淆。如果不清楚就道歉。更重要的是，812px只是一个例子，它与thsi特定情况下使用的文本量有关。我显然在寻找一个解决方案，将任何数量的文本工作。基本上，这个解决方案适用于

.main

的任何高度。您的解决方案与我遇到的问题无关。您已经更改了我提供的HTML。我有一个固定的页眉和一个带有上边距和可变高度的干管。您的解决方案忽略了以上所有内容。我查看了您的JSFIDLE，发现它不起作用。页脚底部和窗口底部之间有间隙。哦，对不起。我修好了，我的朋友。看起来是你干的！：-）好极了！

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

<div class="page-wrap">

    Content!

</div>

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

* {
    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;
}