How to create a DIV with vertical scrollable contents and fixed footer which is always visible?

Question

The HTML should be sth like the following (sorry for the format and formatting but I do not know how to post HTML sample)

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

The result i'm looking for is to always have a vertical scrollbar only for the content and the footer should be always visible at the bottom of the dialog-window. The dialog-window is a fixed size dialog.

I have tried with some ideas from other posts here but do not fit all requirements. Any ideas to do this using CSS (js and jquery also welcome)

Answer 1

How about something like the below?

Just create a container which holds two divs one for the scrollable content and one for the footer. Fix all the heights and make the content div scrollable.

CSS (I won't charge for my expert color choices):

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

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

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

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