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

Question

我有一个 div 可以容纳我的主要内容并且可以滚动；并且在内容 div 正下方的底部还有另一个 div(页脚)将被修复；这里的问题是，无论浏览器窗口的大小如何，主要内容 div 都不应该隐藏在页脚 div 后面，它应该根据浏览器的高度调整其高度。所以基本上，我希望它们都固定在它们的位置，并且主 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/