web-dev-qa-db-ja.com

特定のdivのスクロールバーをbootstrap modalbodyに

私のモーダルボディには2つのdivが並んでいますが、モーダルに対してコンテンツが大きすぎる場合は、そのうちの1つにスクロールバーが必要です。残念ながら、スクロールバーは私の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/

csstwitter-bootstrapscrollbaroverflowbootstrap-modal
7
Getz

モーダルの高さを固定値にするために行いました。

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

それはあなたが必要なものですか？

9
imcconnell

PanelGuestを作成する必要があると思いますposition:relative、パネルが100％になるように、modalShareBodyに特定の高さを設定します。

#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/

1
Zim