Javascript 将div的最小高度更改为浏览器高度

我的页面上有一个id为wrapper see的内容div。顶部还有一个导航栏，底部有一个页脚

我需要的包装是浏览器窗口的高度，减去导航和页脚的高度。如何使用javascript实现这一点

脚本的要点是，大型浏览器窗口的页脚不会从底部浮动，包装器的背景应该一直延伸到页脚

提前感谢您的帮助

---

Connor

我刚刚创建了这个JSFIDLE：

如果您的目标是使页脚即使在大屏幕上也始终位于页面底部，则可以使用position:fixed；底部：0px；，如下图所示：

footer{
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 20px;
    background-color: green;
    color: white;
}

---

在这里，我将给你一个非常基本的例子，如何保持页脚始终底部，即使在大屏幕上

HTML

---

$'element'.css'min-height'，$window.height-$'nav'.height等这似乎与页面的一般样式有关。你确定要依赖Javascript吗？我对CSS解决方案持开放态度，但它需要考虑浏览器高度，即使在大屏幕上，页脚也应该位于页面底部screens@cwyatt1您应该包含在问题本身中重现问题所需的最少代码。这样，当情况得到解决时，这个问题仍然对我们有用others@Zach，公平地说，我会尝试添加它。谢谢，工作非常完美，我想不出一个CSS解决方案。再次感谢，ConnorThank你，这适用于我的另一个项目，但我需要页脚不要总是被捕捉到屏幕底部，再次感谢你的帮助，这将是有用的

 <div id="wrapper">
    <div id="header">My Header</div>
    <div id="content">My Content</div>
    <div id="footer">This my footer</div>
</div>

html,body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:green;
}
#content {
padding:10px;
padding-bottom:80px;   /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:red;
}