Jak utworzyć DIV z przewijaną treścią w pionie i stałą stopką, która jest zawsze widoczna?

Question

HTML powinien być sth jak poniżej (przepraszam za formatem i formatowania, ale nie wiem jak odpowiedzieć próbki HTML)

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

Wynikiem szukam jest, aby zawsze mieć tylko pionowy pasek przewijania treść i stopka powinny być zawsze widoczne w dolnej części okna dialogowego. Okno dialogowe jest dialogiem o ustalonym rozmiarze.

Próbowałem z pomysłami z innych postów tutaj, ale nie pasują do wszystkich wymagań. Wszelkie pomysły na to za pomocą CSS (js i jquery również mile widziane)

Answer 1

Co powiesz na coś podobnego?

Po prostu utwórz pojemnik zawierający dwa elementy divs dla zawartości przewijanej i jeden dla stopki. Napraw wszystkie wysokości i przewiń zawartość.

CSS (nie będzie pobierać opłaty za moje wybory ekspert kolor):

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

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

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

Przykład HTML

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