Dikey kaydırılabilir içerikler ve her zaman görünür olan sabit altbilgisi olan DIV nasıl oluşturulur?

Question

HTML gibi sth olmalıdır (format ve biçimlendirme için üzgünüm ama HTML örneği göndermek için nasıl bilmiyorum) Aşağıdaki

<div id="dialog-window"> 
    <div id="scrollable-content"> 
    what ever content here...div's, ul's and li's 
    </div> 
    <div id="footer"> 
    </div> 
</div> 

hep dikey bir kaydırma çubuğu sahip olmaktır arıyorum sonuç sadece İçerik ve altbilgi için her zaman diyalog penceresinin altında görünmelidir. Diyalog penceresi, sabit boyutlu bir diyalogdur.

Buradaki diğer yayınlardan bazı fikirler denedim, ancak tüm gereksinimleri karşılamıyorum. CSS kullanarak bunu yapmak için herhangi bir fikir (js ve jquery de hoş geldiniz)

Answer 1

Aşağıdaki gibi bir şeye ne dersiniz?

Kaydırılabilir içerik ve altbilgi için iki tane bir tane içeren bir kapsayıcı oluşturun. Tüm yükseklikleri düzeltin ve içeriği div kaydırılabilir hale getirin.

CSS (benim uzman renk seçenekleri için şarj olmuyor): HTML

#dialog-window { 
    height: 200px; 
    border: 1px black solid; 
} 

#scrollable-content { 
    height: 180px; 
    overflow: auto; 
    background-color: blue; 
} 

#footer { 
    height: 20px; 
    background-color: green; 
} 

Örnek

<div id="dialog-window"> 

    <div id="scrollable-content"> 
    <ul> 
     <li>Sample</li> 
     <li>Sample</li> 
     <li>Sample</li> 
     <li>Sample</li> 
     <li>Sample</li> 
     <li>Sample</li> 
     <li>Sample</li> 
     <li>Sample</li> 
     <li>Sample</li> 
     <li>Sample</li> 
     <li>Sample</li> 
     <li>Sample</li> 
     <li>Sample</li> 
    </ul> 
    </div> 

    <div id="footer"> 
    </div> 

</div>