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>

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

1 个答案: