位於div底部的位置元素

有沒有人知道如何將頁腳粘貼到div的底部，如position: fixed元素。我發現的所有方法都將其粘貼在起始視圖的底部或底部，因此您必須一直向下滾動才能看到它們。位於div底部的位置元素

我已經試過父position:relative和孩子設置position: absolute，並且還使用display: table-cell和vertical-align: bottom，但也把它停留在地方當滾動，相反，他們把它靜在在的div或底部默認視圖底部。

.a{ 
 
    position:relative; 
 
    background-color:#ccc; 
 
    width:500px; 
 
    min-height: 150px; 
 
    max-height: 150px; 
 
    overflow-y: scroll; 
 
    float:left; 
 
    padding:8px; 
 
} 
 

 
.footer{ 
 
    position:absolute; 
 
    bottom:0; 
 
    left:0; 
 
    width:100%; 
 
    background-color:#666; 
 
    color:#fff; 
 
}

<div class="a"> 
 
    Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br /> 
 
    <div class="footer">Some text</div> 
 
</div>

來源

2015-11-10 pfg

[HTML/CSS定位「浮動：底部」]的可能的複製（http://stackoverflow.com/questions/526035/html-css-positioning-浮動底部）或http://stackoverflow.com/questions/15358646/css-position-div-to-bottom-of-containing-div – Rob

它不是，答案爲不顯示鎖定項目div的底部 – pfg

它有點。它真的是唯一有效的做法。 – Shaun

你真的不能，不是你想要的方式來，和你需要使用jQuery不停地移動位置。

你可以做什麼，這是最簡單的解決方案，是讓容器包裹整個區域。

.outer { 
    position:relative; 
    width:500px; 
} 

.a{ 
    background-color:#ccc; 
    min-height: 150px; 
    max-height: 150px; 
    overflow-y: scroll; 
    padding:8px; 
} 

.footer{ 
    position:absolute; 
    bottom:0; 
    left:0; 
    width:100%; 
    background-color:#666; 
    color:#fff; 
}

<div class="outer"> 
    <div class="a"> 
     Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br /> 
    </div> 
    <div class="footer">Some text</div> 
    </div>

來源

2015-11-10 01:11:04 Shaun

試圖修改我的標記和樣式以允許這樣做。我嘗試過的第一件事是，但是如果不打破大量的造型，我就無法將頁腳移出頁面。 – pfg

這裏的問題是，你不能一個元素（僅適用於viewport）上使用position: fixed，但你想要的footer元素相對於一個fixed坐姿到它的父。

您可以通過包裝可滾動的div並將footer設置爲該wrap元素的底部。由於wrap不滾動（它內部的元素確實），因此滾動時footer不會移動。

請參閱fiddle。

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.wrap { 
 
    background-color:#ccc; 
 
    position: relative; 
 
} 
 

 
.a { 
 
    height: 150px; 
 
    overflow-y: scroll; 
 
} 
 

 
.b { 
 
    margin-top: 300px; 
 
    padding-bottom: 20px; 
 
} 
 

 
.footer{ 
 
    position:absolute; 
 
    bottom:0; 
 
    left:0; 
 
    background-color:#666; 
 
    color:#fff; 
 
    width: 100%; 
 
}

<div class="wrap"> 
 
    <div class="a"> 
 
     top 
 
     <div class="b">bottom</div> 
 
    </div> 
 
    <div class="footer">Some text</div> 
 
</div>

來源

2015-11-10 01:07:56 justinw

位於div底部的位置元素

回答

相關問題