TinyMCE 4 and 100% Height Within Containing Element

When you're a hammer, every problem looks like a nail. There's no need for javascript or jquery for this as the tags are there to work with. All that's needed is to adjust the margin on #mcu_31 to adjust for the height of the toolbar and footer. The following sets tinymce to be responsive in its containing element.

/*Container, container body, iframe*/
.mce-tinymce, .mce-container-body, #code_ifr {
    min-height: 100% !important;
}
/*Container body*/
.mce-container-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
/*Editing area*/
.mce-container-body .mce-edit-area {
    position: absolute;
    top: 69px;
    bottom: 37px;
    left: 0;
    right: 0;
}
/*Footer*/
.mce-tinymce .mce-statusbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

Revised because TinyMCE changes the id's with menu/toolbar additions or deletions. This works no matter what you do with it.

I solved this problem with pure CSS by using flex-boxes.

<style>
  #article, .mce-tinymce,.mce-stack-layout, .mce-edit-area{
    display: flex;
    flex-direction: column;
    flex: 1;
  }
   .mce-tinymce iframe{
    flex: 1;
  }
</style>

This way you don't have to care about the sizes of the menu-bar and other elements.

JSFiddle demo: https://jsfiddle.net/hk5a53d8/

Instead of doing the calcs in the CSS I have moved them into JS. This means that the menubar height will automatically be calculated and doesn't need to be adjusted manually. It also makes this solution compatible with any browser even without css calc() support.

function resize() {
    setTimeout(function () {
        // Main container
        var max = $('.mce-tinymce')
              .css('border', 'none')
              .parent().outerHeight();

        // Menubar
        max += -$('.mce-menubar.mce-toolbar').outerHeight(); 

        // Toolbar
        max -= $('.mce-toolbar-grp').outerHeight(); 

        // Random fix lawl - why 1px? no one knows
        max -= 1;

        // Set the new height
        $('.mce-edit-area').height(max);
    }, 200); 
} 

$(window).on('resize', function () { resize(); });

But don't just take my word for it.

Try it on jsBin: http://jsbin.com/dibug/2/edit

For good reference I have also create a gist.

For those of you not using jQuery, here's pure javascript code that works:

function doresize(){
    var ht = window.innerHeight;
    console.log("ht = " + ht);

    if (document.getElementsByClassName('mce-toolbar-grp')){
        ht += -document.getElementsByClassName('mce-toolbar-grp')[0].offsetHeight;
        ht += -document.getElementsByClassName('mce-toolbar-grp')[0].offsetTop;
        console.log("ht = " + ht);
    }
    if (document.getElementsByClassName('mce-statusbar')){
        ht += -document.getElementsByClassName('mce-statusbar')[0].offsetHeight;
        console.log("ht = " + ht);
    }

    ht += -3; // magic value that changes depending on your html and body margins

    if (document.getElementsByClassName('mce-edit-area')){
        document.getElementsByClassName('mce-edit-area')[0].style.height = ht + "px";
        console.log("ht = " + ht);
    }

}

window.onresize=doresize;
window.onload=doresize;