將頁腳放在頁面底部

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 ，並且不管main有多大/小），但要保持position: fixed頁腳在瀏覽頁面時向上/向下滾動。 我已經嘗試過position: absolute ，並且不會將頁腳一直推到底。 我嘗試了這里找到的其他一些解決方案，但都沒有成功。 如何將頁腳保留在頁面底部（類似於此頁底部的footer ）？

提前致謝！

Answer 1

嘗試這個：

.footer{
   position:absolute;
   bottom:0
}

位置絕對值根據包含頁腳的元素移動頁腳。 底部0將頁腳保留在其父級的底部。

如果絕對定位元素的父級具有相對位置，則此方法將起作用。 更具體地說， wrapper需要具有以下代碼：

.wrapper{
   position: relative
}

Answer 2

固定執行您要描述的內容，將元素鎖定在視口中。 絕對會使元素忽略頁面其余部分的流程，因此，如果要使其在所有其他元素之下，則會遇到問題。 試一試，它將放在您所有內容的下面。

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

Answer 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%;
}

Answer 4

不要為每個<div>使用位置，只需要將位置添加到.footer

這是一個有效的例子...