javascript - 如果内容未填满窗口，动态调整 div 高度以将页脚保持在底部

Question

我需要调整容器 div 高度，以便在内容太短时将页脚保持在窗口加载和调整大小的底部，但如果内容将页脚推开则不会。我已经尝试了 css min-height:100% 的变体，但它不起作用。我已经设法让它在加载时工作:

<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>

但是当调整窗口大小时，我的页脚最终会出现在页面中间或页面之外。我试过调用一个调整大小的函数，但似乎从来没有让它重置高度。我试过的代码是:

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

和

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

我试图只使用 javascript 和 css，而不是 jquery。我对 JS 不太熟悉，所以如果我遗漏了使函数调用正常工作的内容，请告诉我!我不关心旧版浏览器，只关心 IE9+ 等，它还需要在用户旋转屏幕时在 iPad 上工作...

任何帮助将不胜感激!

Answer 1

尝试使用 css 方法，就像此处概述的方法:http://www.cssstickyfooter.com/