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

时间:2013-05-16 09:49:06

标签: css responsive-design css-position scrollable

我有一个Bootstrap构建的网站,其中包含一个叠加页脚,单击页脚菜单时会打开。

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

这里有一个例子:http://jsfiddle.net/JUESu/5/

#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?

1 个答案:

答案 0 :(得分:1)

给予最大高度应该修复它

.scrollable {
overflow-y: scroll;
max-height:300px;
height: 50%;

width: 95%;
background: red;

}

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