JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
I am the header. <br/>
I am located on top.
</div>
<div id="body">
This is my body <br/><br/>
This is the second line in my body. <br/><br/>
This is the third line in my body. <br/><br/>
This is the fourth line in my body. <br/><br/>
<div id="footer">
<a href="#">Conditions d'utilisation</a> |
<a href="#">Confidentialité</a> |
<a href="#">Nous contacter</a>
</div>
</div>
</body>
CSS
html,body {
margin:0;
padding:0;
height:100%;
}
#container {
position:relative;
margin:0 auto;
height:auto !important;
height:100%;
min-height:100%;
}
#header {
padding:20px;
background:yellow;
text-align:center;
}
#body {
padding:1em 1em 5em;
}
#footer {
position:absolute;
width:100%;
bottom:0;
background:#000;
text-align:center;
padding:10px 0 10px 0;
}
#footer a {
color: White;
padding: 5px;
}