本文介绍了使代码镜像块在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中填充页面的其余部分
发布评论