CSS 特定 div 上的滚动条进入引导模式主体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16561295/
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
Scrollbar on a specific div into bootstrap modal body
提问by Getz
My modal-body has two div side by side, one of them must have a scrollbar if his content is too big for the modal. Unfortunately, the scrollbar appears on the modal-body, not on my div.
我的模态体有两个并排的 div，如果他的内容对于模态来说太大，那么其中一个必须有一个滚动条。不幸的是，滚动条出现在模态主体上，而不是我的 div 上。
What I have:
我拥有的：
What I want:
我想要的是：
My panelGuest has the overflow-yto auto, I tried with 'scroll' instead but the scrollbar is shown but not available. I tried different values for overflow on the modal-body, in vain.
我的 panelGuest 有overflow-y自动，我尝试使用“滚动”代替，但滚动条显示但不可用。我在模态体上尝试了不同的溢出值，但徒劳无功。
css:
css：
#panelGuest{
overflow-y:auto;
overflow-x:hidden;
width: 35%;
float:left;
border-right:solid #ff920a 2px;
min-height:100px;
}
html:
html：
<div id="modalShareBody" class="modal-body">
<div id="panelGuest" class="panel">
The div where i want the y-scrollbar
</div>
<div id="panelDetail" class="panel">
</div>
</div>
Here a fiddle with the issue: http://jsfiddle.net/Ua2HM/2/
这里有一个问题：http: //jsfiddle.net/Ua2HM/2/
回答by imcconnell
I did it making the height of the modal a fixed value:
我做到了使模态的高度成为固定值：
#modalShare {
margin-left:-200px;
height: 300px;
}
@media (max-width: 767px) {
#modalShare {
width: auto;
margin-left: auto;
}
}
#modalShareBody {
overflow:hidden;
}
#panelGuest{
width: 35%;
float:left;
height: 200px;
overflow-y: auto;
overflow-x: hidden;
border-right:solid #ff920a 2px;
}
#panelDetail{
float:left;
width: 60%;
}
Is that what you need?
那是你需要的吗？
回答by Zim
I think you need to make panelGuest position:relative, and set a specific height on the modalShareBody so that the panels can be 100%.
我认为您需要制作 panelGuest position:relative，并在 modalShareBody 上设置特定高度，以便面板可以是 100%。
#panelGuest{
position: relative;
width: 35%;
float:left;
border-right:solid #ff920a 2px;
min-height:100px;
height: 100%;
overflow: auto;
}
Here is the updated fiddle: http://jsfiddle.net/skelly/Ua2HM/5/
这是更新的小提琴：http: //jsfiddle.net/skelly/Ua2HM/5/
