100% 高度 div 内的两个垂直 div

Question

抱歉我的英语不好，希望你能理解我的问题。

我正在思考一个我知道我以前已经解决过一次的问题。问题是我需要在一个 div 内有两个 DIV，其中一个 DIV 具有给定的高度，另一个 DIV 填充父 div 高度的其余部分。问题是第二个 div（没有定义高度，或 100% 高度）需要通过垂直滚动条实现溢出。所有这些都是为了创建一个类似于窗口设置的“外观”，您可以在其中操作左侧的列表和右侧的操作窗口。左侧列表需要一个标题，您可以在其中限制列表和搜索。

看看 http://kokongcrm0.server111.wdc.webdeal.no/index -test.php 查找问题的示例。

所有帮助都是很好的帮助（！）提前感谢。如果有人可以提供帮助，我会很高兴！

Answer 1

使用 position:relative 与 position: 结合使用绝对的。

现场演示

去掉最后两行：

div#iHeader { height:50px; background:#009900; }
div#iWrapper  { height:100%; padding-top:-50px; padding-bottom:-150px; overflow:auto; }

替换他们：

div#list {
    position: relative
}
div#iHeader {
    height:50px; background:#009900;

    width: 100%;
    position: absolute;
    top: 0;
    left: 0
}
div#iWrapper { 
    overflow:auto;

    width: 100%;
    position: absolute;
    top: 50px;
    left: 0;
    bottom: 0
}

Answer 2

这是一种稍微不同的方法，因此您不需要同时使用顶部和底部坐标 - 这样它也可以在 IE7 中工作

（这确实涉及将 IE6/7 置于 Quirks 模式，但是如果有任何用途，请参阅 Doctype 之前的注释，具体操作方法）

JSBIN - IE7 兼容版本

非常相似，因为它使用相对和绝对的混合，但此方法使用边框框大小调整模型，因此可以通过填充创建空间并仍然保持高度的使用：100% ;

Answer 3

删除那个 1k Height div，并使这个 iWrapper 版本自动流动。因此，将其更改

<div id="iWrapper">
  <div style="height:1000px;">
    test test
  </div>
</div>

为：

<div id="iWrapper" style="overflow: auto;">
    test test
</div>

或将其添加到样式表中。