強制TinyMCEのは、親と同じ高さに

Question

ちょうどあなたが、私は私が午前問題を表示するには、このペンを作成した私の問題を理解するために：http://codepen.io/anon/pen/YZwvQz

私は700pxにTinyMCEをの高さを設定するとき、あなたが見ることができるようにそれは親のdivを過ぎて行く、私はちょうどTinyMceが親のdivに合うようにプッシュされたい。私は、TinyMceが高さのパーセンテージをサポートしていないことを発見しました。とにかく私はこれを行うことができますし、TinyMceが入っている親divのサイズを変更するのをやめてもいいですか？

<script> 
    tinymce.init({ 
    selector: '#codeNotesEditor' 
    }); 
</script> 
<main> 
<div id="myClippetWrapper"> 

    <div id="clippetNav"> 



    </div> 

    <div id="codeAndNotesWrapper"> 

    <div id="codeView"> 

    </div> 

    <div id="noteView"> 

     <textarea id="codeNotesEditor"></textarea> 

    </div> 

    </div> 

</div> 

    </main> 

マイCSS：

main 
{ 
    padding: 20px; 
} 

#myClippetWrapper { 
    display: flex; 
    height: 700px; 
} 

#clippetNav { 
    box-sizing: border-box; 
    padding: 10px; 
    width: 250px; 
    background-color: #222222; 
    margin-right: 10px; 
} 

#codeAndNotesWrapper { 
    box-sizing: border-box; 
    display: flex; 
    width: 100%; 
} 

#codeAndNotesWrapper>div { 
    flex-basis: 100%; 
} 

#codeView { 
    padding: 10px; 
    background-color: #222222; 
    margin-right: 10px; 
} 

#noteView { 
    padding: 10px; 
    background-color: #222222; 
} 

#codeNotesEditor {} 

JS：

tinymce.init({ 
    selector: 'textarea', 
    height: 500, 
    menubar: false, 
    plugins: [ 
    'advlist autolink lists link image charmap print preview anchor', 
    'searchreplace visualblocks code fullscreen', 
    'insertdatetime media table contextmenu paste code' 
    ], 
    toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', 
    content_css: '//www.tinymce.com/css/codepen.min.css', 
    height: 700 
}); 

Answer 1

これは非常に可能性がある

は、ここに私のHTMLです！

TinyMCEは動的に生成されるため、インラインスタイルとして直接elementに接続します。つまり、より高い特異性でターゲットを絞ることはできませんが、代わりに!importantを使用してルールをオーバーライドすることができます。また、TinyMCEはによって作成されたDIVの名前を知ることができませんので、あなたは#noteViewの直系の子孫を取る必要があります：

#noteView > div { 
    height: 100% !important; 
    overflow: hidden !important; 
} 

それはそれをの高さに相関の高さの両方を与えることが重要ですまたにはオーバーフローが隠れるので、コンテナの底を通過しません。

私はこのhereを展示している実際のフィドルを作成しました。

希望すると便利です。 :)