动态高度内容最大高度100％

Question

我有wrapper

position: fixed;

和sub-wrapper与

max-height: 100%;

（它的高度需要是动态的，所以我不能设置高度：100％）

且sub-wrapper内部的header为静态高度，content为动态高度。

是否有纯CSS方式使content的{​​{1}}等于100％ - 50px？不要溢出max-height。

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;
}

这是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;
        }

Answer 2

为什么不使用CSS display table

display: table;

示例：https://jsfiddle.net/ht3bvvyx/

适用于IE 8 +

Answer 3

或者只是使用css计算方法：

max-height: calc(100% - 50px);