如何使用垂直可滚动内容和固定页脚创建一个始终可见的DIV？

Question

HTML应该像以下一样(抱歉格式和格式,但我不知道如何发布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>

我正在寻找的结果是始终只有内容的垂直滚动条,页脚应始终在对话框窗口的底部可见.对话窗口是固定大小的对话框.

我已尝试过其他帖子中的一些想法,但不符合所有要求.使用CSS做任何想法(js和jquery也欢迎)

Answer 1

怎么样下面的东西？

只需创建一个容器,其中包含两个div,一个用于可滚动内容,另一个用于页脚.修复所有高度并使内容div可滚动.

CSS(我不会为我的专家颜色选择收费):

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

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

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

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>