Question

我知道这可能是一个微不足道的问题，但我遇到了一些问题。在我的main.html中我有3个div，第一个包含导航栏，第二个是＃34;空＆＃34;使用JQuery / Javascript从其他html文件加载内容的div。第三个是页脚。

我试图实现一个始终位于页面底部的页脚（当您滚动到页面底部时，只能看到它的方式）但是这里是事情。我的第二个div在没有刷新页面的情况下加载了东西，所以当它加载了一个长度为＃34的html文件时。前一个，页脚在内容中保持正确。我该如何解决这个问题？

希望你们明白！

TLDR：如果div加载的内容大于前一个，则页脚在div 2上保持正确。结构是这样的：第二个div：

<div id="background-block">
    <div id="text-block">
        {% block content %}{% endblock %}
    </div>
</div> <!-- /container -->

第3个div：

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

Answer 1

使用CSS修复底部的页脚

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

Answer 2

认为这被称为＆＃34;粘性页脚＆＃34;。快速谷歌搜索会出现大量文章。

Answer 3

看看CSS位置：修复

Answer 4

使用样式 Position:fixed;bottom: 0;

始终在底部修复

html,body{
  width:100%;
  height:100%;
}
.content{

}
.header{
   border:1px solid black;
}
.MiddleContent{
    border:1px solid black;
}
.footer{
    border:1px solid black;
    border: 1px solid black;
    position: fixed;
    bottom: 0;
    z-index: 2000;
    width: 100%;
    background: red;
    Color:white;
}

<div class="content">
<div class="header">
 <h2>
 Header
 </h2>
</div>
<div class="MiddleContent">
 <h2>
 Middle Content
 
 </h2>
 hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>
</div>
<div class="footer">
Footer
</div>


</div>

使用 position: absolute;然后滚动然后页脚将无法修复并随滚动移动

html,body{
  width:100%;
  height:100%;
}
.content{

}
.header{
   border:1px solid black;
}
.MiddleContent{
    border:1px solid black;
}
.footer{
    border:1px solid black;
    border: 1px solid black;
    position: absolute;
    bottom: 0;
    z-index: 2000;
    width: 100%;
    background: red;
    Color:white;
}

<div class="content">
<div class="header">
 <h2>
 Header
 </h2>
</div>
<div class="MiddleContent">
 <h2>
 Middle Content
 
 </h2>
 hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>hello <br>
</div>
<div class="footer">
Footer
</div>


</div>

Answer 5

基于第二个标记示例，这里是一个仅适用于CSS的解决方案：

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

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

页脚总是在底部

5 个答案: