在固定的侧边栏内滚动 [英] Scroll inside of a fixed sidebar

问题描述

我的网站左侧有一个固定的侧边栏，其内容过多，无法在屏幕上显示.如何使该内容可滚动，同时仍允许右侧滚动?

I have a fixed sidebar on the left of my site with content that has too much content to display on the screen. How can I make that content scrollable while still allowing the right side to be scrollable?

我认为简单的overflow-y: scroll;就足够了.似乎我需要在侧边栏上有一个max-height，但是将max-height设置为100％则无济于事.我确定这是一个简单的代码模式，但是可惜的是，今天我的CSS技能让我很茫然.

I would think that a simple overflow-y: scroll; would suffice. It seems like I need to have a max-height on the sidebar, but setting that max-height to 100% does nothing. I'm sure this is a simple code pattern, but alas, my CSS skills have deserted me today.

简单示例: http://jsfiddle.net/tvysB/1/

推荐答案

将top和bottom设置为0，以便侧边栏与视口的高度完全相同:

Set the top and bottom to 0, so that the sidebar is exactly the same height as the viewport:

#leftCol {
    position: fixed;
    width: 150px;
    overflow-y: scroll;
    top: 0;
    bottom: 0;
}

这是您的小提琴: http://jsfiddle.net/tvysB/2/

这篇关于在固定的侧边栏内滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！