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

Question

我打算制作一个类似于 Google+ 或 Facebook 侧边栏的侧边栏。

侧边栏是 position:fixed;左:0；顶部:0；底部:0；宽度:250px 并且有:

高度为 50px 的标题
高度为 50 像素的页脚。
具有基于浏览器高度的动态高度的内容。

有什么帮助吗？

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 */
}

您可以在此处查看概念验证 fiddle :http://jsfiddle.net/teddyrised/2r4r6/

编辑:如果您喜欢冒险，可以使用 calc(100vh - 100px); 设置侧边栏内容高度，但是 older browsers以及iOS Safari正确计算 vh 有问题 ;)