私のモーダルボディには2つのdivが並んでいますが、モーダルに対してコンテンツが大きすぎる場合は、そのうちの1つにスクロールバーが必要です。残念ながら、スクロールバーは私の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/
モーダルの高さを固定値にするために行いました。
#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%;
}
それはあなたが必要なものですか?
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/