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

本文介绍了使代码镜像块在Safari中填充页面的其余部分的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

• 它包含第一部分中的一些文本和$ b $第二部分中的代码镜像
• 第一部分中的文本几乎是固定的（所以它们的高度几乎是固定的），我希望代码镜子的高度恰好填充页面的其余部分。如果在代码镜像中有许多文本，那么使用滚动。 $ b

  然后，我将这个的图片 Plunker

  I want to make a page that satisfies the following conditions:

  • it contains some texts in the first part and a code-mirror in the second part
  • the texts in the first part are almost fixed (so their height is almost fixed), and I want the height of the code-mirror to fill exactly the rest of the page. If there are many texts in the code-mirror, then use scroll.

  Then, I make this 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>

  It works perfectly in Chrome, it however does not work in Safari: the height of the code-mirror is incorrect; we see immediately the problem:

  Does anyone know how to fix this? I used to have a solution with calc(minus a fixed px), but I cannot find it anymore.

  解决方案

  Why don't you use height: 100% instead of flex: 1?

  .rb .CodeMirror { height: 100%; }

  Update:

  For the sake of future users, the above didn't work, but with calc it did for both Safari and Chrome, so:

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

  where 80px is the height of the "first part" as described in the original post.

  Plunker