Question

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

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

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

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

Answer 1

使用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
}

Answer 2

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

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

<强> JSBIN - IE7 compatible version

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

Answer 3

删除1k Height div，并使此iWrapper ver flow自动运行。所以改变这个：

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

到此：

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

或将其添加到样式表。

两个垂直div在100％高度div内

3 个答案: