强制 TinyMCE 与父级高度相同答案

【问题标题】：Forcing TinyMCE to be the same height as parent强制 TinyMCE 与父级高度相同
【发布时间】：2017-03-02 02:47:30
【问题描述】：

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

正如您所看到的，当我将 TinyMce 的高度设置为 700 像素时，它会越过父 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
});

【问题讨论】：

标签： html css flexbox tinymce-4

【解决方案1】：

这很有可能！

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

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

重要的是要给它一个与容器高度相关的高度，但要也隐藏溢出，这样它就不会越过容器的底部。

我创建了一个工作小提琴来展示这个here。

希望这会有所帮助！ :)

【讨论】：