Javascript 有一个总是在底部的页脚

Javascript 有一个总是在底部的页脚,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我知道这可能是个小问题,但我有一些问题。在main.html中,我有3个div,其中第一个包含导航栏,第二个是空div,使用JQuery/Javascript从其他html文件加载内容。第三个是页脚 我试图实现一个页脚,它总是在页面的底部,就像你只在滚动到页面底部时看到它一样,但事情是这样的。我的第二个div加载内容时不会刷新页面,因此当它加载的html文件比上一个文件长时,页脚将保留在内容中。我怎样才能解决这个问题 希望你们能理解 TLDR:Footer保持在div2上,如果div加载的内容比

我知道这可能是个小问题,但我有一些问题。在main.html中,我有3个div,其中第一个包含导航栏,第二个是空div,使用JQuery/Javascript从其他html文件加载内容。第三个是页脚

我试图实现一个页脚,它总是在页面的底部,就像你只在滚动到页面底部时看到它一样,但事情是这样的。我的第二个div加载内容时不会刷新页面,因此当它加载的html文件比上一个文件长时,页脚将保留在内容中。我怎样才能解决这个问题

希望你们能理解

TLDR:Footer保持在div2上,如果div加载的内容比前一个大。 结构如下: 第二组:

第三组:

<div id="footer">
    <footer class="footer">
    <!-- content -->
    </footer>
</div> 

看看CSS位置:固定的

使用CSS固定底部的页脚

.footer {
   position: fixed;
   bottom: 0;
}

我认为这被称为粘性页脚。快速的谷歌搜索会发现大量的文章。

使用样式位置:固定;底部:0

总是固定在底部 html,正文{ 宽度:100%; 身高:100%; } .内容{ } .标题{ 边框:1px纯黑; } .MiddleContent{ 边框:1px纯黑; } .页脚{ 边框:1px纯黑; 边框:1px纯黑; 位置:固定; 底部:0; z指数:2000; 宽度:100%; 背景:红色; 颜色:白色; } 标题 中间内容 喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂 页脚
基于第二个标记示例,以下是一个仅适用于CSS的解决方案:

#footer {
    position: fixed;
    bottom:0;
    width:100%;
}

.footer {
    position: relative;
    max-width:13.66rem;
    margin: 0 auto;
    padding: 5.6rem 0;
}

页脚{position:fixed;bottom:0;}尝试使用fixed,但我不希望它总是在页面底部,只有当你向下滚动时,如果我在我的原始帖子上写得不好,很抱歉。很抱歉,刚刚升级了我的op。我希望页脚在滚动后总是在页面底部,因此不像你显示的那样始终可见。不过谢谢:/i更新了我的答案。您的基本要求页脚将不会被修复,但您可以滚动,然后页脚将被移动。
#footer {
    position: fixed;
    bottom:0;
    width:100%;
}

.footer {
    position: relative;
    max-width:13.66rem;
    margin: 0 auto;
    padding: 5.6rem 0;
}