使用最大高度计算

Question

我需要一个绝对定位的容器，该容器的大小应与内容的大小一样大（以便与容器后面的内容进行尽可能多的交互），但绝对不能超过最大高度（窗口的高度）。

内容具有三个子DIV，顶部两个是静态高度，如果滚动超过了父级的最大高度，则底部将使用滚动条占据剩余空间，该内容将被隐藏或显示。如果容器的高度为静态高度，则此方法效果很好，但是如果容器的高度仅为最大高度，则似乎孩子的calc无法正常工作，并且内容仅被裁剪。

编辑：需要支持IE 9+。

小提琴：https：//jsfiddle.net/z87cnmr2/1/

#container {
  position: absolute;
  top: 0;
  left: 0;
  max-height: 100%;
  /* uncomment this static height to see it work */
  /* height: 100%; */
  width: 100px;
  overflow: hidden;
}
#tip {
  background: #ff0;
  height:20px;
}
#top {
  background: #f00;
  height:20px;
}
#btm {
  background: #0f0;
  max-height: calc(100% - 40px);
  overflow-y: auto;
}
html, body {
  padding: 0;
  margin: 0;
  height:100%;
  width:100%;
}

<div id="container">
  <div id="tip">Tips</div>
  <div id="top">Tops</div>
  <div id="btm">
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br> 
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
    Btm<br>
  </div>
</div>

Answer 1

这里的问题是您的孩子（#btm）设置了百分比高度，而父母没有设置明确的身高。

出于某种原因，在CSS中，当子级的身高设置为百分比高度，而父级只设置了max-height或时min-height，子级的身高不能以此为基础。它需要一个显式的高度以使自己基于。

在这种情况下，如果您可以使用flexbox（似乎可以，因为您正在使用calc，而flexbox具有更大的支持），那么我建议您这样做：

<div id="container">
  <div id="tip">Tip</div>
  <div id="top">Top</div>
  <div id="btm">
    Btm1<br>
    Btm2<br>
    Btm3<br>
  </div>
</div>

CSS：

#container {
  display: flex;
  flex-direction: column;
  max-height: 100%;
}

#tip { height:20px; }
#top { height:20px; }
#btm { overflow-y: auto; }

我已经分叉了您的jsfiddle，并在此处实现了完整答案。

编辑：

对于IE9支持，您可以使用视口单位：

#btm {
  max-height: calc(100vh - 40px);
}

请参阅IE9更新的小提琴。

请注意，如果放弃了IE9支持，则flex选项是更可取的，因为它不依赖于任何可以正常工作的“魔术数字”（例如，此处硬编码的40px）。幻数使您的代码易碎，难以更改，但是如果需要IE9支持，这是我可以选择的选项。