7

私のモーダルボディには 2 つの div が並んでいます。コンテンツがモーダルに対して大きすぎる場合、そのうちの 1 つにスクロールバーが必要です。残念ながら、スクロールバーはdivではなくモーダルボディに表示されます。

私が持っているもの：

ここに画像の説明を入力

私が欲しいもの：

ここに画像の説明を入力

私の panelGuest にはoverflow-yto auto があります。代わりに「scroll」を試しましたが、スクロールバーは表示されますが利用できません。モーダルボディのオーバーフローにさまざまな値を試しましたが、無駄でした。

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/

4

2 に答える 2

9

モーダルの高さを固定値にしました：

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

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

于 2013-05-15T09:44:06.213 に答える
1

position:relativepanelGuest を作成し、 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/

于 2013-05-15T09:47:01.787 に答える