在父Div的底部推脚

Question

我有一个简单的布局,我在父Div中有两个Div.[见这个.] 我想要实现的是,第一个子div必须占用容器中的所有可用空间[有或没有内容]强制在父Div的底部的页脚.只要这必须起作用.因此,当主容器调整大小时,第一个子div仍占用可用空间,而页脚必须保留在父Div的底部.

到目前为止我尝试的是position: absolute; bottom: 0;脚踏板,是的,页脚将坚持到底部,但第一个子div (.content)不会占用剩余的空间.

可能吗？.请帮忙.谢谢.

HTML:

<div class='main'>
    <div class='content'>My Canvas Container</div>
    <div class='footer'>Footer</div>
</div>

CSS:

.main {
    height: 500px;
    background: #000;
}
.content {
    padding: 5px 10px;
    background: #fff;
    border: red solid 1px;
}
.footer {
    padding: 5px 10px;
    text-align: center;
    background: #eee;
}

.content,
.footer {
    display: block;
}

Answer 1

并非每个人的回复都考虑了您要求解决方案具有响应性的要求（我认为您的意思是可扩展的）。如果页脚的高度可以变化，解决方案很简单：

.main {
   height: 500px;
   position: relative;
}
.content {
   height: 90%;
}
.footer {
   bottom: 0;
   height: 10%;
   position: absolute;
   width: 100%;
}

如果页脚必须是固定高度，解决方案仍然很简单，但不再具有出色的浏览器支持：

.main {
   height: 500px;
   position: relative;
}
.content {
   height: calc(100% - 50px);
}
.footer {
   bottom: 0;
   height: 50px;
   position: absolute;
   width: 100%;
}

注意：Content-Box（默认元素大小调整方法）将边距等内容添加到您指定的大小中。如果您以像素为单位说明尺寸，那只是一个小烦恼 - 您只需从指定的尺寸中减去边框/边距/等即可。如果您使用百分比来构建响应式...那就太混乱了。您需要应用 Border-Box，它会从您指定的尺寸中减去边距等内容。

* {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}