动态调整div高度以在内容未填满窗口的情况下将页脚保持在底部

Question

I need to adjust the container div height so that it keeps the footer at the bottom of the window onload and onresize when the content is too short but not if content pushes the footer off. I've tried variations of the css min-height:100% but it doesn't work. I've managed to make it work onload with this:

<div class="header></div>
<script>
 var h = window.innerHeight-205;
 document.write('<div id="container" class="container" style="min-height: ' + h + 'px;">');
</script>
  ....content of container....
</div>
<div class="footer"></div>

but when the window is resized my footer ends up in the middle of the page or off the page. I've tried calling a resize function but never seem to get it to reset the height. The codes I tried were:

function resetHeight () {
var h = window.innerHeight-205;
document.getElementById("container").setAttribute("height",h);
}

and

function resetHeight () {
var h = window.innerHeight-205;
document.getElementById("container").height = h;
}

I'm trying to use only javascript and css, not jquery. I'm not too familiar with JS so if I'm missing something to make the function call work please let me know! I'm not concerned about older browsers, just IE9+ and such, it also needs to work on iPads when the user rotates their screen...

Any help will be appreciated!

Answer 1

尝试使用CSS方法，例如此处概述的方法： http : //www.cssstickyfooter.com/