¿Cómo crear un DIV con contenido desplazable verticalmente y pie de página fijo que siempre está visible?

Question

El código HTML debería ser algo como lo siguiente (lo siento por el formato y formato, pero no sé cómo publicar en versión 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> 

El resultado que estoy buscando es tener siempre una barra de desplazamiento vertical solamente para el contenido y el pie de página debe estar siempre visible en la parte inferior de la ventana de diálogo. La ventana de diálogo es un diálogo de tamaño fijo.

He intentado con algunas ideas de otras publicaciones aquí pero no cumplo con todos los requisitos. Cualquier idea para hacer esto usando CSS (js y jquery también son bienvenidos)

Answer 1

¿Qué tal algo así como a continuación?

Simplemente cree un contenedor que contenga dos divs uno para el contenido desplazable y otro para el pie de página. Repare todas las alturas y haga que el contenido div se pueda desplazar.

CSS (no voy a cobrar por mis opciones de color experto):

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

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

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

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