Footer doesn't adapt dynamically to page size - html

Question

I have a footer div on my side, which should be at the very bottom, regardless of the content.
When the page loads, the footer looks good, but when another div loads much text, the text slides under the footers, so the footer doesn't dynamically adapt to the page size:
<style>
#div1 {
width: 300px;
margin-top: 300px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
}
</style>
<div id="div1">Lorem ipsum dolor sit amet [ ... much text ...]</div>
<div id="footer">Footer Copyright 2016</div>
I know, position: fixed could solve my problem, but I want the footer to be "under" the content, not "over".
Here is the fiddle: https://jsfiddle.net/4fjts5p4/

Answer 1

When you just use absolute, use also these, but I prefer position: fixed. This would be perfect:
#footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
min-height: 40px;
}
Use a min-height rather than height, which doesn't hardcode the height.
Moreover, you haven't closed the footer's } CSS rule.

Answer 2

Try position relative.
#footer {
position: relative;
bottom: 0;
width: 100%;
height: 40px;
}
If you use absolute it will take the footer outside the flow of the document.
See this fiddle.

Answer 3

You should put the footer and content both inside a div say its id is "wrapper" and its padding bottom should be same as footer height and its position should be relative. And then set the footer position to absolute with bottom 0.
So wrapper div code :
#wrapper
{
position:relative;
min-height:100%; /* in case if content is smaller than window size then footer will remain at bottom because of window this */
padding-bottom:40px;/* same as height of footer */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
background:#0c0;
height: 40px;
line-height:40px;
}
Working Demo : https://jsfiddle.net/4fjts5p4/4/

Answer 4

You can make it by structuring HTML like the bellowing, consisting wrapper, content and footer.
The key (also one drawback) is to set the height of footer,
A demo:http://codepen.io/anon/pen/XXjOam
HTML:
<div id="wrapper">
<div id="content">
</div>
<div id="footer">
</div>
</div>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#content {
padding-bottom:100px; /* Height of the footer element */
}
#footer {
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
/* For highlighting, you may not need this */
#footer {
background:#ffab62;
border-top:1px solid #ff4b02;
color:#333;
text-shadow:1px 1px 0 rgba(255,255,255,0.6);
}

Answer 5

All you need to do is set position:relative; and height:auto; . This will fix all your issues.
<style>
#div1 {
width: 300px;
margin-top: 300px;
}
#footer {
position: relative;
bottom: 0;
width: 100%;
height: auto;
}
</style>
<div id="div1">Lorem ipsum dolor sit amet [ ... much text ...]</div>
<div id="footer">Footer Copyright 2016</div>