CODEWITHSUNDEEP
htmlcss
walkinsky
walkinsky

Reputation: 21

The footer which is absolute with bottom = 0 , doesn't stay at bottom

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!

Upvotes: 1

Views: 93

Answers (2)

Ap-Drop
Ap-Drop

Reputation: 21

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

Upvotes: 2

Tushar Kshirsagar
Tushar Kshirsagar

Reputation: 303

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>

Upvotes: 1

Related Questions