固定位置容器内的可滚动内容答案

【问题标题】：Scrollable content inside fixed position container固定位置容器内的可滚动内容
【发布时间】：2013-05-16 09:49:05
【问题描述】：

我有一个 Bootstrap 构建的网站，其中包含一个覆盖页脚，单击页脚菜单会打开该页脚。

在此页脚内部是一个可滚动内容区域，当在可滚动 div 上设置固定高度时，该区域可以正常工作。由于网站是响应式的，我需要这个可滚动区域是一个百分比高度，似乎延伸到可见窗口之外。

#footer-content {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: black;
    opacity: 1;
    display: block;
    color: #7f7f7f;
    height:85%;
}

.scrollable {
    overflow-y: scroll;
    height: 50%; /* Doesnt Work */
    /*height: 300px; /* Works */
    width: 95%;
    background: red;
}

如何在固定位置的容器中创建可滚动的 div？

【问题讨论】：

标签： css responsive-design css-position scrollable

【解决方案1】：

给出最大高度应该可以解决它

.scrollable {
    overflow-y: scroll;
    max-height:300px;
    height: 50%;
  
    width: 95%;
    background: red;
}

这是小提琴 http://jsfiddle.net/JUESu/10/

【讨论】：

感谢@Abhimanyu，问题是通过修复max-height:300px .scrollable div 不会填充 50% 的容器，这将不会响应。