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/

如何创建两个div，其中一个将被修复，另一个将可滚动

1 个答案: