特定 div 上的滚动条进入引导模式主体答案

【问题标题】：Scrollbar on a specific div into bootstrap modal body特定 div 上的滚动条进入引导模式主体
【发布时间】：2013-05-09 19:16:52
【问题描述】：

我的模态体有两个并排的 div，如果他的内容对于模态来说太大，其中一个必须有滚动条。不幸的是，滚动条出现在 modal-body 上，而不是我的 div 上。

我有什么：

我想要什么：

我的 panelGuest 将 overflow-y 设为自动，我尝试使用“滚动”，但滚动条显示但不可用。我在模态体上尝试了不同的溢出值，但徒劳无功。

css:

#panelGuest{
    overflow-y:auto;
    overflow-x:hidden;
    width: 35%;
    float:left;
    border-right:solid #ff920a 2px;
    min-height:100px;
}

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>

这里有一个问题：http://jsfiddle.net/Ua2HM/2/

【问题讨论】：

标签： css twitter-bootstrap scrollbar overflow bootstrap-modal

【解决方案1】：

我认为您需要将 panelGuest position:relative 设置为 modalShareBody 上的特定高度，以便面板可以为 100%。

#panelGuest{
    position: relative;
    width: 35%;
    float:left;
    border-right:solid #ff920a 2px;
    min-height:100px;
    height: 100%;
    overflow: auto;
}

这是更新的小提琴：http://jsfiddle.net/skelly/Ua2HM/5/

【讨论】：

相对位置没用，但是具体高度是！也谢谢你的回答。

【解决方案2】：

我将模态的高度设为固定值：

#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%;
}

这是你需要的吗？

【讨论】：