Html 在Div内Div（100%高度），并将页脚保持在底部-JSFiddle

我已经创建了下面的jsfiddle来重新创建我的问题，我希望.dashboard和.internaldashboard始终具有100%的高度，并且保持页脚始终位于底部

html,body{
  height:100%;
}
#wrap {
position:absolute;
display:table;
height:100%;
width:95%;
padding-bottom:60px;
}

.dashboard{
  width: 95%;
  height: 200%;
  display:table;
  border:5px solid green;
}
.inner-dashboard{
 width: 95%;
  height: 100%;
  display:table-cell;
   border:5px solid red;
 }
#footer {    
    display:table;
    height: 60px;
    width:95%;
    border:5px solid blue;
    bottom:-10px;
}

HTML

---

我添加了修改过的css并添加了

position

属性

我希望修订版能解决您的问题：[更新]

以下是一个示例：

我不得不修改html，为仪表板和页脚提供一个通用容器

<div id="wrap">

        <div class="dashboard">
            <div class="inner-dashboard">

            </div>
        </div>
    <div id="footer"></div> 
</div>

---

是这样吗

内部仪表板的高度也应为100%。另外，在您的解决方案中，页脚号位于页面底部。我已经更新了上面的修订，页脚位于绝对底部，它在JSFIDLE中显示在上面，但实际上它将显示在绝对底部。如果您觉得它很有价值，请接受答案。如果当仪表板增长超过100%时，页脚的位置是绝对的，则页脚号位于页面的末尾。@darkcode请在html文件上尝试该代码，并在本地运行该代码，然后查看。在其他情况下，请使您的

#页脚底部：-10px它将在JSFIDLE上工作
<div id="wrap">

        <div class="dashboard">
            <div class="inner-dashboard">

            </div>
        </div>
    <div id="footer"></div> 
</div>

html,body{
  height:100%;
}
#wrap {
position:absolute;
display:table;
height:100%;
width:95%;
padding-bottom:60px;
}

.dashboard{
  width: 95%;
  height: 200%;
  display:table;
  border:5px solid green;
}
.inner-dashboard{
 width: 95%;
  height: 100%;
  display:table-cell;
   border:5px solid red;
 }
#footer {    
    display:table;
    height: 60px;
    width:95%;
    border:5px solid blue;
    bottom:-10px;
}