如何使主 DIV 内的两个 DIV 固定且可滚动答案

【问题标题】：How to make two DIVs inside the main DIV fixed and scrollable如何使主 DIV 内的两个 DIV 固定且可滚动
【发布时间】：2015-04-22 20:09:06
【问题描述】：

我有 3 个divs：

<div id="div1"> // code 
    <div id="div2"> // code </div>
    <div id="div3"> // code </div>
</div>

我需要确保div1 始终是浏览器窗口的高度（响应window.resize）并且div2 和div3 在浏览器中都有固定的位置（div2 在div1 的底部和div3 在div1 的中间，带有固定的max-height）。此外，div3 的内容可能超出其固定高度，因此它可以滚动浏览所有这些内容。

我尝试了各种设置，包括position: fixed; 和top: 0; bottom: 0;，但都不起作用，因为我的div2 总是被推到浏览器窗口的边界之外。

你知道我该怎么做吗？

谢谢！

【问题讨论】：

你能用你试过的 css 提供一个小提琴吗？
stackoverflow.com/a/9707674/4028085

标签： javascript html css position css-position

【解决方案1】：

试试这个让 div 可滚动：

<div style="overflow:auto;">

代码取自这个问答link

【讨论】：

是的，我可以滚动，但是如何使它的位置固定并且不超出浏览器窗口的边界（和div1）？

【解决方案2】：

你试过overflow:scroll吗？

CSS：

#div3 {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

【讨论】：

是的，我可以滚动，但是如何使它的位置固定并且不超出浏览器窗口的边界（和div1）？