Question

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

我有什么：

enter image description here

我想要的是什么：

enter image description here

我的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/

特定div上的滚动条进入bootstrap模态体

2 个答案: