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

【问题标题】：Make the code-mirror block fill the rest of the page in Safari使代码镜像块填充 Safari 中页面的其余部分
【发布时间】：2018-01-05 17:57:37
【问题描述】：

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

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

然后，我做这个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（减去一个固定的像素）有一个解决方案，但我再也找不到了。

【问题讨论】：

加个html, body { height: 100%; }怎么样
@LGSon 你能做一个特别是在 Safari 中的工作示例吗？
我没有 Safari，因此无法立即进行测试，尽管此示例应该可以工作：plnkr.co/edit/zCdU7Tn2rfvirXnD0kHM?p=preview
@LGSon Safari里不行，布局和我贴的一样。。。这个问题不容易。。。
你的rb类有一个高度集height: 100%，对于一个基于百分比高度的元素，它的所有后代也需要height: 100%，<ui-view class="ng-scope">，<div ng-app="myApp"> , <body> 和 <html> ... 或将rb 的高度更改为视口单位，即height: 100vh

标签： css cross-browser flexbox height ui-codemirror

【解决方案1】：

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

.rb .CodeMirror {
  height: 100%;
}

更新：

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

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

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

Plunker

【讨论】：

我用你的 plunker 的叉子更新了我的答案，请检查一下。
它在 Chrome 中运行良好。但是，在 Safari 中，如果你在代码镜像中换行，你会发现底部隐藏了几行；我们需要添加几行才能看到滚动条。我以前见过这个，我有一个calc的解决方案，但我找不到它......
其实我是在 Safari 上测试过的，我附上了一张 Safari 10.1.2 的截图，也许是其他问题？
顺便说一句，如果你需要使用 calc，你可能正在寻找这样的东西： height: calc(100vh - fixed-height-of-first-part);
点击code-mirror的最后一行，一直点击“enter”添加新行，直到看到滚动条：有些行会隐藏在底部...

【解决方案2】：

想试一试。

你可能想用 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>

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

【讨论】：