使代码镜像块填充 Safari 中页面的其余部分

Question

我要制作满足以下条件的页面：

它包含第一部分的一些文本和一个第二部分的代码镜像
第一部分的文字几乎是固定的（所以它们的高度几乎是固定的），我希望代码镜像的高度正好填满页面的其余部分。如果code-mirror里面的文字很多，就用scroll。

然后，我做这个plunker:

<style>
    .rb {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .rb .CodeMirror {
        flex: 1;
    }
</style>

<div class="rb">
    1<br/>2<br/>3<br/>4<br/>
    <textarea ng-model="body" ui-codemirror="option"></textarea>
</div>

它在 Chrome 中完美运行，但在 Safari 中不起作用：代码镜像的高度不正确；我们立即看到问题：

有谁知道如何解决这个问题？我曾经有一个 calc（减去固定像素）的解决方案，但我找不到了。

Answer 1

想试一试问题

您可能想使用 em 而不是 vh。

1em = 约 16px

还有我从 w3schools 读到的：https://www.w3schools.com/cssref/css3_pr_flex.asp

您还需要导入浏览器属性。我猜更正应该是：

    <style>
    // just in case you didn't
    <!--
    html,body{
        height: 100%; // or 100vh
    }
    -->
    .rb {
        display: -webkit-flex; // for Safari
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        // remove this height: 100%;
        // otherwise should set 100vh to height
    }

    .rb .CodeMirror {
        // You may want to try auto instead of 1. 
        // As the size of the chrome for each browser is different.
        -webkit-flex: 1; // for Safari
        -ms-flex: 1; // for IE
        flex: 1;
    }
</style>

<div class="rb">
    1<br/>2<br/>3<br/>4<br/>
    <textarea ng-model="body" ui-codemirror="option"></textarea>
</div>

请告诉我它是否有效。谢谢！

Answer 2

为什么不用 height: 100% 而不是 flex: 1?

.rb .CodeMirror {
  height: 100%;
}

更新:

为了将来的用户，上面的方法不起作用，但是对于 Safari 和 Chrome 的 calc 它都起作用了，所以：

.rb .CodeMirror {
  calc(100% - 80px); /* notice the spaces around "-" */
}

其中 80px 是原 post 中描述的 "first part" 的高度。

Plunker

使代码镜像块填充 Safari 中页面的其余部分

Make the code-mirror block fill the rest of the page in Safari

css

height

cross-browser

flexbox

ui-codemirror