<body> <div class="wrapper"> <header class="myHeader"> HEADER </header> <section class="content">This is the body</section> <footer class="myFooter">Footer</footer> </div> </body>
html, body { height: 100%; min-height: 100%; margin: 0px; border: 0px; padding: 0px; outline: 0px; } body { position: relative; overflow: hidden; } header { text-align: center; padding: 20px 0px; background-color: #C8C8C8; vertical-align: middle; } .wrapper { min-height: 100%; position: relative; } .content { height: 100%; min-height: 100%; padding-bottom: 75px; } footer { height: 75px; text-align: center; position: absolute; bottom: 0px; background-color: #DC3522; width: 100%; color: white; }