CSS max-height 和overflow auto 总是显示垂直滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10251369/
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
CSS max-height and overflow auto always displays vertical scroll
提问by lightningmanic
I have a div class set up with the following CSS style:
我有一个使用以下 CSS 样式设置的 div 类：
div.multiple_choice{
border: 1px solid black;
max-width: 300px;
max-height: 200px;
overflow: auto;
}
The problem is, when the text inside doesn't force the DIV to reach the maximum height of 200px, the vertical scroll bar still shows up. I can click on the up and down arrows but it only moves the contents up and down by about a pixel or two.
问题是，当里面的文字没有强制DIV达到200px的最大高度时，垂直滚动条还是会出现。我可以单击向上和向下箭头，但它只会将内容上下移动大约一两个像素。
This is occuring in Google Chrome (version 18.0) and Iceweasel 11.
这发生在 Google Chrome（版本 18.0）和 Iceweasel 11 中。
采纳答案by lightningmanic
回答by GoodLuckBamboo
I have encounter this problem.But I solved this use the following css style:
我遇到过这个问题。但是我使用以下css样式解决了这个问题：
div.yourcontainer{overflow-y:auto;}
If the container was higher than max-height,the vertical scrollbar will show.
如果容器高于 max-height，则会显示垂直滚动条。
回答by Alex McCabe
I was having an issue with this, and I found that having position: relativeon the child elements was causing the problem. Obviously this can't be the solution for everyone, especially if position: absoluteis being used, but for me it worked.
我遇到了这个问题，我发现position: relative在子元素上有问题。显然这不能成为每个人的解决方案，尤其position: absolute是在使用时，但对我来说它有效。
回答by Chris Petty
I had this problem when trying to wrap a list (flex column) of react components in a div, I resolved it by changing margin of elements within each list item to be 0.
我在尝试将 React 组件的列表（flex 列）包装在 div 中时遇到了这个问题，我通过将每个列表项中元素的边距更改为 0 来解决它。
The approach to troubleshoot this for me was to inspect the list items (perhaps each <li>in OP) and see what styles were making the div think each list item was larger than what was visible to the human eye.
对我来说，解决这个问题的方法是检查列表项（可能每个<li>在 OP 中）并查看哪些样式使 div 认为每个列表项大于人眼可见的项。
Here is an example of inspecting a rogue margin on an icon within a list item in my project:
这是在我的项目中检查列表项中图标上的恶意边距的示例：
Solution is to set the style of that icon to have a vertical margin of 0, though in my application I just made all the margin 0 and added some padding-right.
解决方案是将该图标的样式设置为垂直边距为 0，但在我的应用程序中，我只是将所有边距设为 0 并添加了一些填充权。
回答by vol7ron
I also had this problem using Bootstrap and nav. It occurred because bootstrap definds the li in nav-tabs as: .nav-tabs > li { margin-bottom:-1px; }. To counteract this, you must also do:
我在使用 Bootstrap 和导航时也遇到了这个问题。它的发生是因为引导definds在导航的选项卡为李：.nav-tabs > li { margin-bottom:-1px; }。为了抵消这种情况，您还必须执行以下操作：
.nav-tabs > li:last-child {
margin-bottom:0;
}
Without setting the last-child, the following example would always show scroll, no matter how much content is in the list:
如果不设置 last-child，以下示例将始终显示滚动，无论列表中有多少内容：
<ul class="navs nav-tabs nav-stacked" style="max-height:80px;overflow:auto;">
<li></li>
...
</ul>
回答by the_5imian
I came across this bug earlier today. In my case a list of child elements had display: inline-block instead of display: block. Switching to display: block for my list of child elements in the truncated div fixed the issue for me.
我今天早些时候遇到了这个错误。在我的例子中，一个子元素列表有 display: inline-block 而不是 display: block。Switching to display: block for my list of child elements in the truncated div 为我解决了这个问题。
