javascript - 动态高度内容最大高度 100%

Question

我有一个 wrapper 和

position: fixed;

和 sub-wrapper 与

max-height: 100%;

(它的高度需要是动态的，所以我不能设置height: 100%)

sub-wrapper 内部是静态高度的 header 和动态高度的 content。

是否有纯 CSS 方法使 content 的 max-height 等于 100% - 50px？不溢出 sub-wrapper。

.wrapper {
  padding: 10px;
  position: fixed;
  left: 10px;
  top: 10px;
  right: 10px;
  bottom: 10px;
  background: #dadada;
}
.sub-wrapper {
  background: white;
  padding: 10px;
  max-height: 100%;
}
header {
  height: 50px;
  background: lightblue;
}
.content {
  background: gold;
}

<div class="wrapper">
  <div class="sub-wrapper">
    <header>header</header>
    <div class="content">
      lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas ullam quaerat dignissimos quasi, rerum architecto amet ratione nostrum rem ipsa accusantium, esse aliquam assumenda tempore, porro cum? Non, a, maxime.
      <br>lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas ullam quaerat dignissimos quasi, rerum architecto amet ratione nostrum rem ipsa accusantium, esse aliquam assumenda tempore, porro cum? Non, a, maxime.
      <br>lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas ullam quaerat dignissimos quasi, rerum architecto amet ratione nostrum rem ipsa accusantium, esse aliquam assumenda tempore, porro cum? Non, a, maxime.
      <br>met ratione nostrum rem ipsa accusantium, esse aliquam assumenda tempore, porro cum? Non, a, maxime.
      <br>lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas ullam quaerat dignissimos quasi, rerum architecto amet ratione nostrum rem ipsa accusantium, esse aliquam assumenda tempore, porro cum? Non, a, maxime.
    </div>
  </div>

</div>

这是 chrome 中的工作示例 https://jsfiddle.net/5rqcpcf4/ ，但我也需要它用于 IE 11。

Answer 1

https://jsfiddle.net/5rqcpcf4/2/

如果它有固定的高度，就绝对定位标题。

       .wrapper{
            padding: 10px;
            position: fixed;
            left: 10px;
            top: 10px;
            right: 10px;
            bottom: 10px;
            padding-top: 50px;
            background: #dadada;
            overflow: hidden;
        }
        .sub-wrapper{
            background: white;
            padding: 10px;
            max-height: 100%;
            overflow: auto;
        }
        header{
            height: 50px;
            background: lightblue;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
        }
        .content{
            background: gold;
        }