Javascript 将页脚推到白色背景div下

我有一个名为content的div，背景颜色为白色。我有一个问题，我让页脚停留在页面底部，但它在内容分区的顶部。请参阅图片作为参考。我希望它总是在content div下，但如果它缩小，也总是在页面底部。 我想要的一个完美的例子是的页脚样式

这里有一个演示

HTML

---

在setnewcontentheight函数中，执行以下操作：

$("div.container:nth-child(5)").height(innerHeight - 40 - $("#footer").height());

---

对于第n个孩子来说，这有点奇怪，你可能想要创建一个ID或一个更简单的选择器来选择带有白纸的容器。

再次查看你的站点，容器中是否有一些位置为：绝对的元素？这不起作用…这是绝对的，但就是它*html页脚{位置：绝对；顶部：表达式0 footer.offsetHeight+document.documentElement.clientHeight？document.documentElement.clientHeight:document.body.clientHeight+ignoreMe=document.documentElement.scrollTop？document.documentElement.scrollTop:document.body.scrollTop+'px'；}

 .footer { 
  z-index: 0;
  bottom: 0px;
  height: 40px;
  width: 100%;
  background-color:red;
}


.whiteBox{
    background-color:white;
    width:800px;
    height:800px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    top:80px;
    -webkit-box-shadow: 10px 11px 5px -6px rgba(0,0,0,0.43);
-moz-box-shadow: 10px 11px 5px -6px rgba(0,0,0,0.43);
box-shadow: 10px 11px 5px -6px rgba(0,0,0,0.43);
margin-bottom:100px;
 z-index: 10;
    }

$("div.container:nth-child(5)").height(innerHeight - 40 - $("#footer").height());