Revision:
When creatinga static web page, you may often find your footer floating up. To get rid of this problem and keep the footer at the bottom of the webapge, there are different ways possible:
<style> /* (A) FOOTER */ #page-footer {/* (A1) FIXED AT BOTTOM */ position: fixed; bottom: 0; left: 0; /* (A2) DIMENSIONS */ width: 100%; height: 40px; padding: 0 5px; /* (A3) CENTER TEXT */ display: flex; align-items: center; justify-content: center; } /* (B) MAIN CONTENTS */ #page-main {padding-bottom: 50px; /* SAME OR MORE HEIGHT THAN FOOTER */} </style> <header id="page-head">MY SITE</header> <main id="page-main">Last Line.</main> <footer id="page-footer">Copyright My Site</footer>
<body> <div class="wrapper">content <div class="push"></div> </div> <footer class="footer"></footer> </body> <style> html, body {height: 100%;} .wrapper { min-height: 100%; /* Equal to height of footer */ /* But also accounting for potential margin-bottom of last child */ margin-bottom: -50px;} .footer, .push { height: 50px;} </style>
<body> <div class="content"> <div class="content-inside">content </div> </div> <footer class="footer"></footer> </body> <style> html, body {height: 100%; margin: 0;} .content {min-height: 100%;} .content-inside {padding: 20px; padding-bottom: 50px;} .footer {height: 50px; margin-top: -50px; </style>
<body> <div class="content">content</div> <footer class="footer"></footer> </body> <style> .content {min-height: calc(100vh - 70px);} .footer {height: 50px;} </style>
example:
<style> /* (A) FULL HEIGHT DOCUMENT */ html, body {padding: 0; margin: 0; height: 100%; } /* (B) FLEXIBLE BOX ON BODY */ body {display: flex; flex-direction: column;} /* (C) ALLOW MAIN CONTENT SECTION TO AUTO-FILL HEIGHT */ #page-main { flex-grow: 1; } </style> <header id="page-head">MY SITE</header> <main id="page-main">Main contents</main> <footer id="page-footer">Copyright My Site</footer>
<body> <div class="content">content</div> <footer class="footer"></footer> </body> <style> html, body {height: 100%;} body {display: flex; flex-direction: column;} .content {flex: 1 0 auto;} .footer {flex-shrink: 0;} </style>
<style> /* (A) FULL HEIGHT DOCUMENT */ html, body {padding: 0; margin: 0; height: 100%; } /* (B) GRID LAYOUT - AUTO-FILL HEIGHT FOR MAIN SECTION */ body { display: grid; grid-template-rows: auto 1fr auto;} </style> <header id="page-head">MY SITE</header> <main id="page-main">Main contents</main> <footer id="page-footer">Copyright My Site</footer>
<body> <div class="content">content</div> <footer class="footer"></footer> </body> <style> html {height: 100%;} body {min-height: 100%;display: grid; grid-template-rows: 1fr auto;} .footer {grid-row-start: 2; grid-row-end: 3;} </style>