使代码镜像块在Safari中填充页面的其余部分 [英] Make the code-mirror block fill the rest of the page in 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

  这篇关于使代码镜像块在Safari中填充页面的其余部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！