2013-05-15 22 views
6

Modal gövdemin iki div yanı yan yana, içeriğinin modal için çok büyük olması durumunda bunlardan birinin kaydırma çubuğu olması gerekir. Maalesef, kaydırma çubuğu modal gövdede görünür, div'umda değil.Belirli bir div üzerindeki kaydırma çubuğunun içine doğru kaydırma çubuğu

Ben Ne:

enter image description here

Benim istediğim:

enter image description here

Benim panelGuest auto, beraber çalıştığımız overflow-y yerine 'kaydırma' var ama kaydırma gösterilir ama mevcut değil. Modal bedende taşma için farklı değerler denedim, boşuna.

css:

#panelGuest{ 
    overflow-y:auto; 
    overflow-x:hidden; 
    width: 35%; 
    float:left; 
    border-right:solid #ff920a 2px; 
    min-height:100px; 
} 

html:

İşte
<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> 

konuyla keman: http://jsfiddle.net/Ua2HM/2/

cevap

9

Ben kalıcı bir sabit değerin yüksekliğini yapma yaptı:

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

İhtiyacınız olan bu mu?

+0

Evet bu tam olarak neye ihtiyacım var, teşekkürler! Çok yararlı! – Getz

1

PanelGuest position:relative'u yapmanız ve modalShareBody'de belirli bir yüksekliği ayarlamanız gerektiğini düşünüyorum, böylece paneller% 100 olabilir.

İşte
#panelGuest{ 
    position: relative; 
    width: 35%; 
    float:left; 
    border-right:solid #ff920a 2px; 
    min-height:100px; 
    height: 100%; 
    overflow: auto; 
} 

olduğunu güncellenmiş keman: http://jsfiddle.net/skelly/Ua2HM/5/

+0

Göreceli konum kullanışlı değil, ancak özel yükseklik! Cevabınız için teşekkürler. – Getz

+0

Harika .. Çalıştığına sevindim. – ZimSystem

İlgili konular