一个高度为100%的div中有两个垂直的div

Question

一个高度为100%的div中有两个垂直的div

cssheightvertical-scrollingvertical-sync

4

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

我正在思考一个问题，我知道我以前解决过。问题是我需要在一个div中放置两个子div，其中一个子div具有给定的高度，另一个子div填充父div的其余高度。问题在于第二个子div（没有定义高度或100％高度）需要可以垂直滚动。所有这些都是为了创建一个“Outlook”窗口设置，其中您在左侧操作列表，在右侧操作窗口。左侧列表需要一个标题，您可以在其中限制列表并进行搜索。

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

任何帮助都是好的帮助！提前感谢您的帮助。我会非常高兴如果有人能帮忙！

- Richard

3个回答

1

这里有一种稍微不同的方法，可以避免使用顶部和底部坐标 - 这样可以使其在IE7中也能正常工作。

（虽然这需要将IE6/7放入Quirks模式中，但如果有用途，请参见Doctype前的注释如何进行）

JSBIN - 兼容IE7版本

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

- clairesuzy

0

删除那个高度为1k的div，并将此iWrapper版本更改为自动流动。因此更改如下：

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

转换为：

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

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

- Robik

因为您是新手，如果这个解决方案有效，请接受此答案。 - Robik

抱歉，显然没有表达清楚 :) 问题在于这个元素不会根据 iHeader 正确比例调整高度。内部高度1000px仅用于测试滚动条。此外，iWrapper 已经 overflow:auto; - Richard

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thirtydot · Accepted Answer

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