html - 强制 TinyMCE 与父级高度相同

Question

为了帮助您理解我的问题，我创建了这支笔来显示我遇到的问题:http://codepen.io/anon/pen/YZwvQz

如您所见，当我将 TinyMce 的高度设置为 700px 时，它会超过父 div，我只想将 TinyMce 推到适合父 div。我发现 TinyMce 不支持高度百分比。无论如何我可以做到这一点，并停止调整超过 TinyMce 所在的父 div 的大小吗？

这是我的 HTML:

<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

这很有可能!

由于 TinyMCE 是动态生成的，它作为内联样式直接附加到 元素。这意味着你不能以更高的特异性来定位它，但幸运的是你可以使用 !important 来覆盖规则。您也不会知道 TinyMCE 创建的 DIV 的名称，因此您必须采用 #noteView 的直接后代:

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

给它一个与容器高度相关的高度很重要，但也 overflow hidden ，这样它就不会超过容器底部。

我创建了一个工作 fiddle 来展示这个 here .

希望对您有所帮助! :)