Question

我在布局中有一个position: fixed div，作为侧边栏。我被要求让它的一部分内容保持固定在它的顶部（内部），其余部分滚动如果它溢出div的底部。

我看过this answer，但是那里提供的解决方案不适用于position: fixed或position: absolute容器，这很痛苦。

我已经对我的问题here进行了JSFiddle演示。理想情况下，大量文本应滚动，而不是溢出到页面底部。标题的高度可能因内容而异，也可能是动画。

body {
    background: #eee;
    font-family: sans-serif;
}

div.sidebar {
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 280px;
}
div#fixed {
    background: #76a7dc;
    padding-bottom: 10px;
    color: #fff;
}

div#scrollable {
    overlow-y: scroll;
}

<div class="sidebar">
    <div id="fixed">
        Fixed content here, can be of varying height using jQuery $.animate()        
    </div>

    <div id="scrollable">
        Scrolling content<br><br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

如果没有固定标题，我只需将overflow-y: scroll添加到div.sidebar即可，如果它溢出容器底部，我可以高兴地滚动所有内容。但是，我遇到的问题是在侧边栏的顶部有一个固定的，可变高度的标题，如果它太长而无法装入容器，那么该滚动下面有任何内容。

div.sidebar 必须保留position: fixed，我非常希望在没有任何黑客的情况下执行此操作，并尽可能使其成为跨浏览器。我尝试了各种各样的东西，但没有一个能起作用，而且我不确定从这里尝试什么。

如果position: fixed容器内的div只在Y方向上滚动，当它的内容溢出包含的div，并且具有不同的，不确定高度的固定标头时，怎么能？我非常想远离JS，但如果我必须使用它，我会。

Answer 1

如果您使用

似乎有效

div#scrollable {
    overflow-y: scroll;
    height: 100%;
}

并将padding-bottom: 60px添加到div.sidebar。

例如：http://jsfiddle.net/AKL35/6/

但是，我不确定为什么它必须是60px。

此外，您错过了f

中的overflow-y: scroll;

Answer 2

我将可滚动的div改为绝对位置，一切都适合我

div.sidebar {
    overflow: hidden;
    background-color: green;
    padding: 5px;
    position: fixed;
    right: 20px;
    width: 40%;
    top: 30px;
    padding: 20px;
    bottom: 30%;
}
div#fixed {
    background: #76a7dc;
    color: #fff;
    height: 30px;
}

div#scrollable {
    overflow-y: scroll;
    background: lightblue;

    position: absolute;
    top:55px; 
    left:20px;
    right:20px;
    bottom:10px;
}

DEMO with two scrollable divs

Answer 3

对我有用的是什么：

div#scrollable {
    overflow-y: scroll;
    max-height: 100vh;
}

Answer 4

实际上这是更好的方法。如果使用height: 100%，则内容会离开边框，但当95%内容完成时，内容将按顺序排列：

div#scrollable {
    overflow-y: scroll;
    height: 95%;
}

Answer 5

将可滚动的div设置为max-size并将overflow-y: scroll;添加到其属性中。

编辑：尝试让jsfiddle工作，但它不能正确滚动。这需要一些时间来弄明白。

在固定位置容器中滚动部分内容

5 个答案: