在固定位置容器中滚动内容的一部分 [英] Scroll part of content in fixed position container

问题描述

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

I have a position: fixed div 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 或 position：absolute 容器，这是一个痛苦。

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

我对此处进行了一次JSFiddle示范我的问题。大量的文本应该理想地滚动，而不是溢出到页面的底部。

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示例代码：

JSFiddle example code:

CSS标题的高度可以随内容而变化， ：

CSS:

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;
}

HTML：

<div class="sidebar">
    <div id="fixed">
        Fixed content here, can be of varying height using jQuery $.animate()        
    </div>

    <div id="scrollable">
        Potentially long content
    </div>
</div>​

没有固定的标题， c $ c> overflow-y：scroll 到 div.sidebar ，我可以高兴地滚动所有的内容，如果它溢出容器的底部。但是，我遇到了问题，在侧边栏的顶部有一个固定的，可变高度标题，并有任何内容下面的滚动，如果太长，不适合容器。

Without a fixed header, I can simply add overflow-y: scroll to div.sidebar and 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.

div.sidebar 必须留在 position：fixed ，我会非常喜欢这样做没有任何黑客，以及使它作为跨浏览器尽可能。我尝试了各种各样的事情，但没有一个工作，我不确定要从这里尝试。

div.sidebar must stay 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里面 position：fixed 容器滚动只有在Y方向，当它的内容溢出包含div，固定标题的变化，不确定的高度？我非常希望远离JS，但如果我必须使用它，我会的。

How can I make a div inside a position: fixed container 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.

推荐答案

工作

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

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

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

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

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

此外，您错过了来自 overflow-y：scroll;

这篇关于在固定位置容器中滚动内容的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！