Gyancode

A free library of HTML, CSS, JS

Search This Blog

Tuesday 3 January 2017

Sticky footer

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

<title>Sticky footer</title>
</head>
<style>
* { margin: 0;}
html, body { font-family:Verdana, Arial, Helvetica, sans-serif}
.container {min-height: 50%; text-align:center; }
.container:after {content: ""; display: block;}
.container h1{ margin:20% auto;}
.footer, .container:after { height: 45px; }
.footer {background: #333; color:#fff;float: left; width: 100%;}
.footer h4{ text-align:center; font-size:13px; margin:14px 0;}
</style>
<body>
<div class="container">
 
  <h1>Sticky Footer</h1>
    
</div>

<footer class="footer">
  <h4>I'm the Sticky Footer.</h4>
</footer>
</body>
</html>

No comments :

Post a Comment