Place div on bottom of page with dynamic content

StackOverflow https://stackoverflow.com/questions/20760422

  •  21-09-2022
  •  | 
  •  

Question

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?

Was it helpful?

Solution 2

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.

OTHER TIPS

with dynamic content, you can always use this:

sticky-css-footers-the-flexible-way

always helps!! :)

==================================================================================

EDIT

see this demo

CSS

html, body, #container {
    height: 100%;
    margin:0;
    padding:0;
}
body > #container {
    height: auto;
    min-height: 100%;
}
#footer {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
    background-color:grey;
}
#content {
    padding-bottom: 3em;
}

HTML

<div id="container">
    <div id="content">

    </div>
</div>
<div id="footer">My Dynamic Footer</div>

Note : In the fiddle, un-comment the text to see the footer stretching the height after a dynmic height content!!

Reference : Refer here

Yo can use this Structure:

position:absolute;
bottom:0;
width:100%;
height:150px;

and set

position:Relative

for its parent.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top