Search code examples
csspositionfooter

footer at bottom with ajax loaded content

I have this html structure with the section being basically my main content:

<html>
<head>
<body>
  <nav id="primary">
  <nav id="secondary">
  <section id="maincontainer">
    <div id="main">...</div>
    <footer>
     <div class="footer-inner">...</div>
    </footer>
  </section>
</body>
</html>

Within the div with id 'main' there is content being dynamically loaded via ajax, so the height can vary. I need the footer to always be at the bottom, even for sub pages with barely any content not filling the page height. Currently I have position absolute for the footer, which does not work for the dynamic content pages, the footer is stuck in the middle of the content (original window height position).

Is there a way to do this css only? Thank you!

Solution

  • Do this 

    <footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

    You can also read about flex it is supported by all modern browsers

    Update: I read about flex and tried it. It worked for me. Hope it does the same for you. Here is how I implemented.Here main is not the ID it is the <main> div

    body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    display: block;
    flex: 1 0 auto;
}

    Here you can read more about flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Do keep in mind it is not supported by older versions of IE.