Search code examples
htmlcsssticky-footer

Place div on bottom of page with dynamic content

I want to place a footer div at the bottom of the page. The problem is, I have a dynamic content, so I can not work with "position: fixed;".

The page looks something like this:

<body>
<div id="container">
<div id="navbar">...</div>
<div id="content"></div>
<div id="footer">...</div>
</div>

When I click a link in the navbar, another content is loaded with ajax and written in the "content" div. So the height of the page changes. The footer must always be at the bottom of the screen, when there is no overflow of the content and must be at the bottom of the page, when the content gets too long. How can I realize this?

Solution

  • You're going to want to check out "CSS Sticky Footer": https://css-tricks.com/snippets/css/sticky-footer/ That's the solution you're looking for.