resize ckeditor for responsive design

Question

I'm trying to use CKEditor on a responsive design, and I cannot get the height to work. The following code with height define works to resize the text area to 100%, which overflows the containing div.

        CKEDITOR.replace( 'article', {
            toolbar: [
                { name: 'basicstyles', items: [ 'Bold', 'Italic' ] },
                { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Blockquote' ] },
                { name: 'links', items : [ 'Link','Unlink' ] },
                { name: 'insert', items : [ 'Image' ] }
            ],
            uiColor: '#f9fafb',
            height: '100%'
        });

I have found the below code, but I can't figure out where to paste it. I've also tried editing config.js, and following all the documentation on CKEDitor's website. They tell you what to do, but not where to do it.

editor.resize( '100%', '350', true );

In theory, the "true" will make the height include the entire editor, not just the text area, but I don't know where it belongs.

The div containing the editor uses this CSS:

height: -moz-calc(100% - 400px);
height: -webkit-calc(100% - 400px);
height: calc(100% - 400px);

Answer 1

In django, I had to set the width to auto in the settings.py file:

CKEDITOR_CONFIGS = {
'default': {
    'toolbar': None, #You can change this based on your requirements.
    'width': 'auto',

          },
    }