css - 使中心 div 占用剩余屏幕，底部 div 根据需要占用尽可能多的空间

Question

这与this question有些相关但我试图在 div 垂直对齐时实现这一点。

或多或少，这就是我想要实现的目标:

Main Div:占据屏幕的其余部分

---

Footer Div:根据需要占用尽可能多的空间

float:bottom 的 css 不可用，所以我想听听一些替代方案。

这是我目前拥有的:

<div id="main_div" style="height:100%;overflow:scroll">
...Contents
</div>

<div id="footer_div" style="height:50px">
...Contents
</div>

页脚显示在 main_div 下方，用户必须向下滚动才能看到它，而不是 main_div 调整自身以占据足够的屏幕高度以防止滚动条显示。

Answer 1

你可以检查这个 fiddle http://jsfiddle.net/sarfarazdesigner/3fLca/

让我知道我的理解是对还是错？因为我所做的是我对你的问题的理解。

#main_div{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:50px;
    overflow:auto;
    background:#eee;
}
#footer_div{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    background:#ddd;
    height:50px;
}