位于div底部的位置元素

Question

有没有人知道如何将页脚粘贴到div的底部，如position: fixed元素。我发现的所有方法都将其粘贴在起始视图的底部或底部，因此您必须一直向下滚动才能看到它们。

我已经试过父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>

Answer 1

你真的不能，不是你想要的方式来，和你需要使用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> 

Answer 2

这里的问题是，你不能一个元素（仅适用于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>