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

Question

我有一个 div 可以容纳我的主要内容并且可以滚动；底部还有另一个 div(footer)，正好在内容 div 的下方，这将被修复；这里的问题是，无论浏览器 window 的大小如何，主要内容 div 不应隐藏在页脚 div 后面，它应该根据的高度调整其高度浏览器。所以基本上，我希望它们都固定在它们的位置，并且 main div 应该始终是可滚动的。到目前为止，无论我尝试过什么，我的可滚动 div 都将其内容隐藏在页脚后面。我希望我的问题没有混淆。

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

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

How to create two divs where one of them will be fixed and other will be scrollable

html

css

fixed

scrollable