如何创建两个 div，其中一个是固定的，另一个是可滚动的

【问题标题】：How to create two divs where one of them will be fixed and other will be scrollable如何创建两个 div，其中一个是固定的，另一个是可滚动的
【发布时间】：2015-05-25 14:17:23
【问题描述】：

我有一个 div 来保存我的主要内容并且可以滚动；并且在内容 div 正下方的底部还有另一个 div(footer) 将被修复；这里的问题是，无论浏览器窗口的大小是多少，主要内容 div 都不应该隐藏在页脚 div 后面，它应该根据浏览器的高度调整其高度。所以基本上，我希望它们都固定在它们的位置上，并且主 div 应该始终是可滚动的。到目前为止，无论我尝试过什么，都使我的可滚动 div 将其内容隐藏在页脚后面。我希望我的问题不会令人困惑。

【问题讨论】：

你的意思是像this这样的东西吗？

标签： html css fixed scrollable

【解决方案1】：

Flex 布局将在这方面真正为您提供帮助：

HTML：

<div id="content">content</div>
<div id="footer">footer</div>

CSS：

body {
    display:flex;
    flex-direction:column
}

#content {
    flex:1;
    overflow:auto;
}
#footer {
    height:50px;  /* Whatever fixed height you desire */
}

示例：

http://jsfiddle.net/0qhevkbn/

【讨论】：

嘿，这个例子正好展示了我需要的东西，但现在的问题是，当我删除其他样式（如页脚位置）时，它直接位于页眉下方。当我降低浏览器的高度时，内容会被页脚隐藏。
@TeddyPayne 确保 body 或内容和页脚元素的一些包装容器具有 display: flex 样式。如果您已经有了它，请尝试从示例代码开始，一次更改一行以满足您的需求，并准确查看哪些更改导致您的布局中断。如果您发布标记和样式或链接到 jsfiddle，我可以帮助您了解导致问题的原因。