Make the code-mirror block fill the rest of the page in Safari

问题

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.

回答1:

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

回答2:

It would like to give question a try.

You may want to use em instead of vh.

1em = approx 16px

Also from what I read from w3schools: https://www.w3schools.com/cssref/css3_pr_flex.asp

You will need to also import the browser property. I am guessing the correction should be:

    <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>

Please let me know if it works or not. thanks!

来源：https://stackoverflow.com/questions/45394245/make-the-code-mirror-block-fill-the-rest-of-the-page-in-safari

标签

css

cross-browser

flexbox

height

ui-codemirror