Html 如何创建具有垂直可滚动内容和始终可见的固定页脚的 DIV？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7504918/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a DIV with vertical scrollable contents and fixed footer which is always visible?
提问by Daniel Cerecedo
The HTML should be sth like the following (sorry for the format and formatting but I do not know how to post HTML sample)
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>
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)
我尝试过这里其他帖子的一些想法，但不符合所有要求。任何使用 CSS 执行此操作的想法（也欢迎使用 js 和 jquery）
回答by Paul.s
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.
只需创建一个容器，其中包含两个 div，一个用于可滚动内容，一个用于页脚。修复所有高度并使内容 div 可滚动。
CSS (I won't charge for my expert color choices):
CSS（我不会为我的专业颜色选择收费）：
#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
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>
