Question

我有一个可变高度（和最大高度）的外部div，它由JavaScript设置了特定的像素数量，其中包含两个div。

第一个div旨在保存可变数量的内容，例如链接列表。它没有高度设定。
第二个div用于保存固定数量的内容，并具有特定的高度设置。

现在，最大高度不起作用。第一个div继续增长，即使有溢出：auto;设置，并将其下方的第二个div推到外部div的边界之外。我怎样才能使第一个div太大而外部div包含它和固定高度的第二个div时，第一个div会开始滚动？

示例页面：http://thevastdesign.com/scrollTest.html

感谢您的帮助。我最喜欢CSS解决方案，即使它需要一些黑客攻击。它只需要在Firefox 3 +，IE8和IE7中工作。

想法？

Answer 1

没有JS，你真的不能这样做。你在div-div上的最大高度不会控制你的一个内部div的高度来调用它的滚动。内部div总是要设置的高度（像素，自动等等）。您可以使用overflow: auto根据需要创建整个外部div，也可以在第一个内部div上设置最大高度并设置溢出。

Answer 2

鉴于您的设置，我会执行以下操作（您的问题暗示了类名，而不是从链接源中提取）：

div.outer {
  position: relative;
  max-height: $length(y);
  overflow: hidden;
}

div.innerFixed {
  position: absolute;
  bottom: 0;
  height: $length(y);
  overflow: hidden;        /* just in case, to keep things from
                              blowing out into all manner of crazy */
}

div.innerFlex {
  max-height: $length(y);
  overflow: auto;

}

这些规则不涉及框属性，这会对您应用的高度值产生影响。 .innerFixed和.innerFlex的组合高度值（包括框值）应等于容器的高度值。

如果您想获取所有Zen并翻转垂直构图，可以在bottom上为top交换.innerFixed并指定margin-top或padding-top至.innerFlex。

我注意到的其他事情是你有

div.outer { float: left; }

...但是考虑到你需要从该元素（以及设置正确的内容优先级），我建议你先将你的大列放在源顺序中并应用

div.mainContent {
  float: right;
  width: $length(x);
}

div.outer { /* i.e., the column that started the discussion */
  margin-right: length(x);
}

理解后者的margin-right稍微大于前者的width（更大的是考虑两个元素之间的阴沟）。尝试一下，你会喜欢它。

在外部div上使用CSS max-height强制在内部div上滚动

2 个答案: