Site menu

CodeCook.io

  • Languages
    • C
    • C++
    • CSS
    • Git
    • HTML
    • Java
    • JavaScript
    • jQuery
    • PHP
    • Python
    • Ruby
    • Scala
  • layout

CSS - Web page footer always bottom

Force position of footer down at the bottom of the page no matter the height of the content section of the page. For small pages the footer sticks to the bottom of window. For large pages the footer is positioned below all the content and is only visible by scrolling.

0
1478
  • Share on Facebook
  • Share on Google+
  • Share on Twitter
<body>
    <div class="footer-down-wrapper">
        <main class="content">
            {{main_content}}
        </main>
        <footer>
            {{footer_content}}
        </footer>
    </div>
</body>
markup
html, body {
    height: 100%;
    margin: 0;
}
.footer-down-wrapper {
    display: table;
    height: 100%;
    width: 100%;
}
.content {
    display: table-row;
    height: 100%;
}
footer {
    display: table-row;
}
css

Notes

  • Height of all elements is dynamic

last update: Dec. 6, 2014

Advertisement

This project is hosted on DigitalOcean, try it and support us

Other language

  • HTML

Random task

  • List processes listening on ports
  • Undo git reset hard
  • Transition
  • Run docker daemon container
  • Assign variable
  • Blog
  • About
  • License