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

Question

我的模态体有两个并排的 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/

Answer 1

我这样做是为了使模态的高度成为一个固定值：

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

那是你需要的吗？

Answer 2

我认为你需要制作 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/