CSS 在固定侧边栏内滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13337646/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scroll inside of a fixed sidebar
提问by Ryan Madsen
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?
我的网站左侧有一个固定的侧边栏，其中包含太多内容无法在屏幕上显示的内容。如何使该内容可滚动，同时仍允许右侧可滚动？
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.
我认为一个简单的overflow-y: scroll;就足够了。似乎我需要在侧边栏上设置最大高度，但将最大高度设置为 100% 没有任何作用。我敢肯定这是一个简单的代码模式，但唉，我的 CSS 技能今天已经抛弃了我。
Simple example here: http://jsfiddle.net/tvysB/1/
这里的简单示例：http: //jsfiddle.net/tvysB/1/
回答by Joseph Silber
Set the topand bottomto 0, so that the sidebar is exactly the same height as the viewport:
将top和设置bottom为0，以便侧边栏与视口的高度完全相同：
#leftCol {
position: fixed;
width: 150px;
overflow-y: scroll;
top: 0;
bottom: 0;
}
Here's your fiddle: http://jsfiddle.net/tvysB/2/
这是你的小提琴：http: //jsfiddle.net/tvysB/2/
回答by Mac
I had this same issue and fixed it using:
我遇到了同样的问题并使用以下方法修复了它：
.WhateverYourNavIs {
max-height: calc(100vh - 9rem);
overflow-y: auto;
}
This sets the max height for your nav in a way that is responsive to the height of the users browser and then gives it a scroll when it needs it.
这以响应用户浏览器高度的方式设置导航的最大高度，然后在需要时为其提供滚动。
