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

Posted 2023-03-06

【中文标题】特定 div 上的滚动条进入引导模式主体

【英文标题】：Scrollbar on a specific div into bootstrap modal body

【发布时间】：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/

【参考方案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%;

这是你需要的吗？