lundi 20 avril 2015

Sticky footer when content is shorter than page size

I've got a footer that works fine, but when the size content of the page is shorter than the page size, the footer is rendered below the content not in the bottom of the page, here is an image:

enter image description here

here is my code:

the html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />


</head>
<body ng-app="AngularJSApp">
<div class="contentBody">


    <div id="contenido"> 
        @RenderBody()
    </div>

</div>


<div class="footer">

    <p class="copyright">Copyright &copy; 2015 Diego Unanue &mdash; <a href="http://ryanfait.com/" title="3xM Web Design">3xM Web Design</a></p>
</div>

and here is the css:

.footer {
  position: absolute;
  width: 100%;
  margin-bottom: 0;
  background-color: #2D2D2D;
  height: 100px;
  text-align: center;
  color: white;
 }

What can I do to fix this problem, and always keep the footer in the bottom of the page?

Aucun commentaire:

Enregistrer un commentaire