css - 使中心div占用剩余的屏幕，底部div占用所需的空间

这在某种程度上与this question有关，但是当div垂直对齐时，我正在尝试实现这一点。

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

主Div：获取屏幕的其余部分



页脚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进行自我调整以仅占据足够的屏幕高度以防止滚动条显示。

最佳答案

你可以检查这个小提琴
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;
}

关于css - 使中心div占用剩余的屏幕，底部div占用所需的空间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14972668/