Footer positioning issue - css

Question

Here is a sample of the problem
FIDDLE DEMO
When you make the viewing windows smaller, so that the footer is overlapping the other content and the scroll bar appears.
When scrolling down the footer is stuck in its previous position and doesn't go back down. I don't want the footer fixed (position:fixed) if possible.
Could this be fixed with some thing min/max-height property or z-index?
HTML:
<header>something here</header>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora temporibus illum aliquam voluptatum at blanditiis itaque tenetur laborum officia culpa maiores quasi accusantium excepturi! Quidem alias ullam praesentium quod eius.</div>
<footer>© 2014 some text</footer>
CSS :
header {
width: 100%;
height: 100px;
text-align: center;
color: #fff;
background-color: #333;
}
div {
height: 200px;
background-color: #ccc;
}
footer {
color: #fff;
background-color: #333;
height: auto;
width: 100%;
text-align: center;
bottom: 0px;
position: absolute;
}

Answer 1

The issue here is bottom:0 !!
I hope this is what you want -> Fiddle Demo
I added height:100% hoping that, that is what you want.
You can change it if you want
html,body{
width:100%;
height:100%;
}
header {
width: 100%;
height: 100px;
text-align: center;
color: #fff;
background-color: #333;
}
div {
height: 100%;
background-color: #ccc;
}
footer {
color: #fff;
background-color: #333;
height: auto;
width: 100%;
text-align: center;
position: absolute;
}