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

【问题标题】：Two vertical divs within a 100% height div100% 高度 div 内的两个垂直 div
【发布时间】：2011-07-22 03:11:52
【问题描述】：

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

我正在转过头来解决一个我知道我曾经解决过一次的问题。问题是我需要一个 div 内的两个 DIV，其中一个 DIV 具有给定的高度，另一个填充父 div 高度的其余部分。问题是第二个 div（没有定义的高度，或 100% 的高度）需要使用垂直 Scroller 进行溢出。所有这一切都是为了制作一个“外观”类似的窗口设置，您可以在其中操作左侧的列表和右侧的操作窗口。左侧列表需要一个标题，您可以在其中限制列表和搜索。

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

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

【问题讨论】：

标签： css height vertical-scrolling vertical-sync

【解决方案1】：

这里有一个稍微不同的方法，所以你不需要一起使用顶部和底部坐标 - 这样它也可以在 IE7 中工作

（虽然这确实涉及将 IE6/7 置于 Quirks 模式，但如果有任何用处，请参阅 Doctype 之前的注释如何做到这一点）

JSBIN - IE7 compatible version

这与三十点非常相似，因为它使用了相对和绝对的混合，但是这种方法使用了border-box box-sizing模型，因此可以通过填充来创建空间，并且仍然保持使用height：100 %;

【讨论】：

【解决方案2】：

使用position: relative combined with position: absolute。

Live Demo

去掉最后两行：

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
}

【讨论】：

谢谢！这项服务是最好的！想知道为什么我以前从来没有这样做过！
您需要 IE7 支持吗？正如我刚刚从@clairesuzy 的回答中注意到的那样，我的在 IE7 中不起作用。我敢肯定，如果你愿意，可以通过一些调整来做到这一点。

【解决方案3】：

删除那个 1k Height div，并让这个 iWrapper ver 自动流动。所以改变这个：

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

到这里：

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

或将其添加到您的样式表中。

【讨论】：

因为你是新手，如果这有效，请接受这个答案。
嗨，对不起，显然不够清楚:) 问题是这个不会调整为与 iHeader 成比例的正确高度。内部高度 1000px 仅用于测试滚动条。另外 iWrapper 已经溢出：auto;