使用具有最大高度的计算器

Question

我需要一个 absolute-positioned 容器，它的大小与其内容一样大（以便尽可能多地与容器后面的内容进行交互），但永远不会超过最大高度（[= 的高度） 35=]).

内容有3个child个DIV，上面两个是静态高度，下面如果超过parent的[=28=就把剩下的space带滚动条] 通过将隐藏或显示的内容。如果容器具有静态高度，则此方法可以正常工作，但如果容器只有 max-height，则 child 的计算似乎不起作用，内容只是被裁剪了。

编辑：需要支持IE 9+。

Fiddle: 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

您可以使用 display:flex 来实现这一点，只要您不必支持旧版浏览器（< 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 (>= IE 9)，你可以使用 vh 因为你是基于 window:

的高度

#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>

Fiddle: https://jsfiddle.net/z87cnmr2/6/

Answer 2

这里的问题是您的 child (#btm) 设置了百分比高度，而 parent 没有明确的高度设置。

出于某种原因，在 CSS 中，当 child 设置了百分比高度但 parent 只有 max-height 或 min-height 时，child 百分比高度不能以此为基础。 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 选项更可取，因为它不依赖于任何 "magic numbers" 正常工作（例如，此处硬编码的 40px）。幻数使您的代码容易因更改而中断，但如果需要 IE9 支持，这是我会选择的选项。

使用具有最大高度的计算器

Use Calc with Max Height

css

height

scroll

max

CSS:

编辑：