강제 TinyMCE에 부모와 같은 높이가 될

Question

그냥 당신이 내가 데 문제를 표시하려면이 펜을 만들어 내 문제를 이해하는 데 도움이 : http://codepen.io/anon/pen/YZwvQz

내가 700 픽셀로 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을 보여주는 실용적인 피들을 만들었습니다.

희망이 도움이됩니다. :)