将页脚保留在页面底部答案

【问题标题】：Keep Footer At Bottom Of Page将页脚保留在页面底部
【发布时间】：2016-07-08 15:37:18
【问题描述】：

我有以下内容：

<div class="wrapper">
    <div class="top">
    </div>

    <div class="left">
    </div>

    <div class="main">
    </div>

    <div class="footer">
    </div>
</div>

使用以下 CSS：

.top {                                                                          
    position: absolute;                                                         
    left: 0;                                                                    
    height: 80px;                                                               
    width: 100%;                                                                
} 


.left {                                                                         
    position: absolute;                                                         
    left: 0; top: 80px; bottom: 100px;                                          
    width: 200px;                                                               
    margin-left: 5px;                                                           
}

.main {                                                                         
    position: absolute;                                                         
    left: 200px; top: 80px; bottom: 100px;                                      
    width: 84%;                                                                                                                     
}   

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

我想将footer 保留在页面底部（在left 和main 之后，无论main 有多大/小），但使用position: fixed，页脚会滚动向上/向下滚动页面。我试过position: absolute 并没有将页脚一直推到底部。我已经尝试了这里找到的其他一些解决方案，但都没有奏效。如何将页脚保留在页面底部（类似于此页面底部的footer）？

提前致谢！

【问题讨论】：

喜欢这个jsfiddle.net/xwjhn7ej/7 ？ ... 比底部窗口的视口页脚内容少 - 比容器底部的视口页脚内容多

标签： javascript jquery html css django

【解决方案1】：

试试这个：

.footer{
   position:absolute;
   bottom:0
}

Position absolute 根据包含它的元素移动页脚。底部 0 将页脚保持在其父级的底部。

如果绝对定位元素的父元素具有相对位置，这将起作用。说得更具体一点，你的wrapper需要有如下代码：

.wrapper{
   position: relative
}

【讨论】：

这应该可以，但我刚刚注意到body 和wrapper 的高度均为0px，left 的高度为214px，main 的高度为64 像素，尽管包含高度 > 2000 像素的内容。肯定会发生一些奇怪的事情。

【解决方案2】：

Fixed 执行您所描述的操作，将元素锁定在您的视口中。 Absolute 让一个元素忽略页面其余部分的流程，所以如果你想让它低于其他所有内容，你会遇到问题。试一试，它将把它放在你所有的内容下面。

footer{
  position: relative
  width: 100%
  float: left
}

如果您需要在内容很短的情况下将它留在屏幕的最底部，您可以在所有内容周围添加一个包装器元素并尝试这样的操作

.wrapper{
  display: block;
  min-height: 100vh;
  position: relative;
  padding-bottom: footer height (set this to how tall your footer is)
}
footer{
  position: absolute;
  bottom: 0;
}

【讨论】：

【解决方案3】：

试一试：

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
    .left {                                                                         
float:left;                                          
width: 200px;                                                               
margin-left: 5px;                                                           
}
#right {
   float:left;
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

对于旧版浏览器：

#container {
   height:100%;
}

【讨论】：

【解决方案4】：

不要为每个<div> 使用位置，您只需将位置添加到.footer

Here is a working example...

【讨论】：