Question

我解释我的问题有点困难，只是展示一个例子（检查JSFiddle）更好：

#contacts {
position: fixed;
bottom: 0;
width: 100%;
max-height: 75%;
}
#contacts .tab-content {
height: 100%;
overflow: scroll;
}

JSFiddle no scroll

如您所见，底部有一个标签，用于切换面板（我使用Bootstrap 3）。面板的内容是动态生成的，因此我需要面板在生成内容时增加其高度，最高可达页面高度的75％（不要覆盖所有内容）。现在，当内容太多时，我需要一个内部滚动条;你可以看到，滚动条就在那里，但是它不起作用，因为#contacts div没有特定的高度，所以.tab-content＆＃34; s＆＃34; height：100％＆＃34 ;不管用。如果我尝试使用＆＃34;溢出：滚动＆＃34;在#contacts而不是.tab-content上，它可以工作：

JSFiddle scrolls label too

但现在的问题是，滚动条还会滚动标签标签，并且它在.tab内容之外，所以当我点击它时，div会失去焦点而标签会关闭。不知道怎么解决这个问题？谢谢！

Answer 1

概念验证解决方案

我将设计问题归结为基础知识（没有Bootstrap）。

使用.fixed-wrapper将position: fixed固定在页面底部，然后应用overflow-y: scroll启用滚动功能。

.header标签元素也是固定的，但诀窍是将底部偏移设置为与.fixed-wrapper的最大高度值相同的值，在此示例中为60％。

然后切换内容，您需要调整以下内容：

.fixed-wrapper { max-height: 0;}
.header { bottom: 0;}
.scroll-panel { display: none;}

如果您有一个.active类来区分显示状态，那么您的CSS可能如下所示：

.fixed-wrapper.active { max-height: 60%;}
.fixed-wrapper.active .header { bottom: 60%;}
.fixed-wrapper.active .scroll-panel { display: bottom;}

将其应用于Bootstrap布局时，请确保选择器足够具体，以便Bootstrap类不会覆盖上面显示的关键规则。

注意：此解决方案有一个小的限制。如果内容不够高以强制滚动，则标题元素可能会挂起即使.scroll-panel没有达到最大高度，也会有60％的位置。您可能需要一些JavaScript来处理它。

body {
    margin: 0;
}
p {
    line-height: 2.0;
}
.fixed-wrapper {
    background-color: lightblue;
    max-height: 60%;
    position: fixed;
    bottom: 0;
    overflow-y: scroll;
}
.header {
    background-color: lightgray;
    position: fixed;
    bottom: 60%;
    right: 0;
    margin-right: 50px;
    width: auto;
}
.scroll-panel {
    background-color: lightblue;
    display: block;
}

<div class="fixed-wrapper">
    <div class="header">header or tab...</div>
    <div class="scroll-panel">
        <p>Some content...</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.</p>        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.</p>
    </div>
</div>

Answer 2

好的，所以我再次看了它，这确实是一种痛苦，但这似乎有效（虽然有点难看）：Fiddle

#contacts {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-height: 75%;
    overflow-y: hidden;

}
#contacts .tab-content {
    background-color: #ccc;   
}

.tab-pane {
    height:300px;
    overflow-y:scroll;
}
#contacts ul li {
    position: relative;
    float: right;
    margin-right: 15%;
}
#contacts > ul > li > a {
    background-color: #ccc;
}

CSS高度百分比的麻烦

2 个答案: