编辑：

Question

我需要一个绝对定位的容器，它只能与它的内容一样大（为了尽可能地与容器后面的内容进行交互），但绝不会超过最大高度（窗口的高度）。

内容有三个子DIV，前两个是静态高度，如果内容隐藏或显示的内容超过父级的最大高度，则底部使用滚动条获取剩余空间。如果容器具有静态高度，这可以正常工作，但如果容器只有最大高度，那么孩子的calc似乎不起作用，内容只是被裁剪。

编辑：需要支持IE 9 +。

#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）有一个百分比高度设定，而父母没有明确的身高设定。

由于某些原因，当孩子设置了百分比高度但父母只有max-height或min-height时，孩子的百分比高度不能以此为基础。 It needs an explicit height to base itself off of

在这种情况下，如果你可以使用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; }

I've forked your jsfiddle and implemented the full answer here too.

编辑：

对于IE9支持，您可以使用viewport units：

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

See IE9 updated fiddle.

请注意，如果删除IE9支持，flex选项更可取，因为它不依赖任何＆＃34;魔术数字＆＃34;只是工作（例如这里硬编码40px）。魔术数字会让你的代码变得脆弱，但是如果需要IE9支持，那么这就是我选择的选项。

Answer 2

您可以使用display:flex来完成此操作，只要您不必支持旧版浏览器（＆lt; IE11，如果我没记错的话）。

#container {
  position: absolute;
  top: 0;
  left: 0;
  max-height: 100%;
  /* uncomment this static height to see it work */
  /* height: 100%; */
  width: 100px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#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">Tip</div>
  <div id="top">Top</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>

https://jsfiddle.net/z87cnmr2/4/

如果您想支持旧版本的IE（＆gt; = IE 9），您可以使用vh，因为您将此视为窗口高度：

#container {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  max-height: 100%;
  overflow: hidden;
}
#tip {
  background: #ff0;
  height:20px;
}
#top {
  background: #f00;
  height:20px;
}
#btm {
  background: #0f0;
  overflow-y: auto;
  max-height: calc(100vh - 40px);
}

html, body {
  padding: 0;
  margin: 0;
  height:100%;
  width:100%;
}

<div id="container">
    <div id="tip">Tip</div>
    <div id="top">Top</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>
    </div>
</div>

小提琴：https://jsfiddle.net/z87cnmr2/6/

使用最高高度的Calc

2 个答案:

CSS：

编辑：