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

Question

我想做一个满足以下条件的页面：

• 它在第一部分包含一些文本，在第二部分包含一个代码镜像
• 第一部分中的文本几乎是固定的（所以它们的高度几乎是固定的），我希望代码镜像的高度完全填满页面的其余部分。如果代码镜像中有很多文本，则使用滚动。

然后，我做了这个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（减去一个固定的 px），但我再也找不到它了。

Answer 1

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

.rb .CodeMirror {
  height: 100%;
}

更新：

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

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

其中 80px 是原始帖子中描述的“第一部分”的高度。

普朗克

Answer 2

它想试一试。

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

1em = 大约 16 像素

同样来自我从 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>

请让我知道它是否有效。谢谢！