4

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

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

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

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

4

3 回答 3

5

position: relative结合position: absolute使用。

现场演示

摆脱这最后两行：

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
}
于 2011-03-24T16:59:21.430 回答
1

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

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

JSBIN - IE7 兼容版本

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

于 2011-03-24T17:26:36.473 回答
0

删除那个 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>

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

于 2011-03-24T13:13:27.310 回答