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

Scroll part of content in fixed position container

提问by Bojangles

I have a position: fixeddiv in a layout, as a sidebar. I've been asked to have part of it's content stay fixed to the top of it (internally), and the rest to scroll if it overflows the bottom of the div.

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

I've had a look at this answer, however the solution presented there doesn't work with position: fixedor position: absolutecontainers, which is a pain.

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

I've made a JSFiddle demonstration of my problem here. The large amount of text should ideally scroll, instead of overflowing into the bottom of the page. The height of the header can vary with content, and may be animated.

我在这里对我的问题进行了 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>

Without a fixed header, I can simply add overflow-y: scrollto div.sidebarand I can happily scroll all it's content if it overflows the bottom of the container. However, I'm running into issues with having a fixed, variable height header at the top of the sidebar, and having any content underneath that scroll if it's too long to fit into the container.

没有固定的标题，我可以简单地添加overflow-y: scroll，div.sidebar如果它溢出容器的底部，我可以愉快地滚动它的所有内容。但是，我遇到了在侧边栏顶部有一个固定的、可变高度的标题的问题，如果它太长而无法放入容器，则在该滚动下方有任何内容。

div.sidebarmuststay position: fixed, and I would very much like to do this without any hacks, as well as make it as cross browser as possible. I've attempted various things, but none of them work, and I'm unsure as to what to try from here.

div.sidebar必须留下来position: fixed，我非常希望在没有任何黑客攻击的情况下做到这一点，并使其尽可能跨浏览器。我尝试了各种方法，但都没有奏效，而且我不确定从这里开始尝试什么。

How can I make a div inside a position: fixedcontainer scroll only in the Y direction when it's content overflows the containing div, with a fixed header of varying, indeterminate height? I'd very much like to stay away from JS, but if I have to use it I will.

当position: fixed容器的内容溢出包含的 div 时，如何使容器内的 div仅在 Y 方向滚动，并且具有可变、不确定高度的固定标题？我非常想远离 JS，但如果我必须使用它，我会的。

回答by FrogInABox

It seems to work if you use

如果你使用它似乎工作

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

and add padding-bottom: 60pxto div.sidebar.

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

For example: http://jsfiddle.net/AKL35/6/

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

However, I am unsure why it must be 60px.

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

Also, you missed the ffrom overflow-y: scroll;

另外，你错过了f来自overflow-y: scroll;

回答by Julien

What worked for me :

什么对我有用：

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

回答by Dmitri Algazin

I changed scrollable div to be with absolute position, and everything works for me

我将可滚动 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

带有两个可滚动 div 的 DEMO

回答by Vasil

Actually this is better way to do that. If height: 100%is used, the content goes off the border, but when it is 95%everything is in order:

实际上，这是更好的方法。如果height: 100%使用，则内容超出边界，但当95%一切正常时：

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

回答by Harry

Set the scrollable div to have a max-sizeand add overflow-y: scroll;to it's properties.

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

Edit: trying to get the jsfiddle to work, but it's not scrolling properly. This will take some time to figure out.

编辑：试图让 jsfiddle 工作，但它没有正确滚动。这需要一些时间才能弄清楚。