自动高度为两个其他div之间的div

Question

我打算制作一个像Google+或Facebook边栏一样的侧边栏。

侧栏是position:fixed; left:0; top:0; bottom:0; width: 250px并且有：

高度为50px的标题
一个50px高的页脚 基于浏览器高度的动态高度内容。

任何帮助？

Answer 1

您可以简单地将侧边栏的主体放在其包含的父级内。由于页眉和页脚是粘性的（我推测）并且具有固定高度，因此您可以使用：

#sidebar-content {
    position: absolute;
    top: 50px;
    bottom: 50px;
    left: 0;
    right: 0;
    /* or width: 100%; if you don't want to use the left/right positions */
}

你可以在这里看到一个概念验证小提琴：http://jsfiddle.net/teddyrised/2r4r6/

修改：如果您有冒险精神，可以使用calc(100vh - 100px);设置侧边栏内容高度，但older browsers以及iOS Safari计算出现问题vh正确;）

Answer 2

指定身高：100％;或给予身高：自动;

希望它可以帮助你..