在固定侧边栏内滚动 [英] 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; 就足够了.似乎我需要在侧边栏上设置最大高度，但将最大高度设置为 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/

Simple example here: 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屋！