javascript - 将页脚保留在页面底部

Question

我有以下内容:

<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 之后，无论大小/small main 是)，但是 position: fixed 当您滚动页面时，页脚会向上/向下滚动。我已经尝试过 position: absolute 并且不会将页脚一直推到底部。我已经尝试了在这里找到的其他一些解决方案，但都没有奏效。如何将页脚保留在页面底部(类似于本页底部的 footer)？

提前致谢!

Answer 1

试试这个:

.footer{
   position:absolute;
   bottom:0
}

绝对位置根据包含页脚的元素移动页脚。 Bottom 0 将页脚保持在其父元素的底部。

如果绝对定位元素的父元素具有相对位置，这将起作用。更具体地说，您的 wrapper 需要具有以下代码:

.wrapper{
   position: relative
}