我创建了下面的 jsfiddle 来重现我的问题，我希望 .dashboard 和 .inner-dashboard 始终具有 100% 的高度并将页脚始终保持在底部。
HTML
<div id="wrap">
<body>
<div class="dashboard">
<div class="inner-dashboard">
</div>
</div>
</body>
</div>
<div id="footer"></div>
CSS
html,body{
height:100%;
}
#wrap {
min-height: 100%;
height: auto;
margin: 0 auto -60px;
padding: 0 0 60px;
}
#footer {
height: 60px;
background-color: blue;
}
.dashboard{
width: 100%;
height: auto;
min-height: 100%;
position: absolute;
padding-bottom: -60px;
background-color:green;
}
.inner-dashboard{
height:100%;
padding-bottom: -60px;
background-color:red;
}
最佳答案
这是一个例子:jsFiddle
我必须修改 html 以便为仪表板和页脚提供一个通用容器。
<div id="wrap">
<div class="dashboard">
<div class="inner-dashboard">
</div>
</div>
<div id="footer"></div>
</div>
我将 wrapper(公共(public)容器)放在表格中，将其他元素放在表格单元格中。
因此，即使您的仪表板高度为 200%，页脚仍位于底部。
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 - Div inside div (100% height) 并保持页脚在底部 - JSFiddle，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21363286/