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>

但是当窗口调整大小时，我的页脚会在页面中间或页面之外结束。我试过调用一个resize函数，但似乎永远不会让它重置高度。我试过的代码是：

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 aproach，如下所示：http://www.cssstickyfooter.com/

动态调整div高度，以便在内容未填充窗口时将页脚保持在底部

1 个答案: