绝对底部= 0的页脚不会停留在底部

Question

This is what I've tried so far:

  .content{ margin-bottom: 50px; } .bottom{ position:absolute; height:50px; line-height: 50px; bottom:0; width:80%; background:green; } 

  <div class="content"> ...... </div> <footer class="bottom"> <p> this is always at bottom </p> </footer> 

Here is a Fiddle is an example too.

Did someone know why this happen, and how I can solve it?

Thank you!

Answer 1

1.You have make small change in CSS.According to your demo link .

.parent {
    height:1500px;
    width:200px;
    border:1px solid grey;
    position: relative;
    background-color: white;
}
.topDiv {
    display:block;
    background:silver;
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    left:0
}

.bottomDiv {
    background:red;
    width:100px;
    height:100px;
    position:absolute;
    bottom:0;
}

body {
    height:1500px;
    background: linear-gradient(#111, #777);
}

Answer 2

You have to use position:fixed, to achieve this !!

CSS

<style type="text/css">
.content{
  margin-bottom: 50px;
}

.bottom{
 position:fixed;
 height:50px;
 line-height: 50px;
 bottom:0;
 width:80%;
 background:green;
}


</style>

HTML

<div class="content">
    ......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>    ......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>    ......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>    ......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>    ......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>    ......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>......<br>
</div>
<footer class="bottom">
    <p>
    this is always at bottom
    </p>
</footer>