css - TinyMCE 4 和包含元素内的 100% 高度

Question

我正在从 TinyMCE 3 迁移到 4。

但是，我无法让 TinyMCE 填充其 100% 高度的容器(它确实适用于 TinyMCE 3)。

请注意这个 fiddle :http://jsfiddle.net/MLJaN/

我使用下面的 CSS 尝试将 iframe 及其所有父级设置为 100% 高度。我同意它看起来并不理想，但我认为它应该以这种方式工作。

 body, html, .mce-tinymce, .mce-edit-area.mce-container, iframe, .mce-container-body.mce-stack-layout
 {
     height: 100% !important;
 }

正如您在 live-fiddle 中看到的，它恰好是工具栏“太高”的像素数量:即它太高了 34px(工具栏的高度)。

这有效，但它不会随浏览器自动调整大小，它使用 calc()，目前仅支持大约 79%:http://jsfiddle.net/MLJaN/2/

现在，我正在寻找一种纯 CSS(无 calc() 函数)解决方案，以使整个编辑器填满其容器并可以流畅地调整大小。

如有任何指点，我们将不胜感激。

Answer 1

当您是锤子时，每个问题看起来都像钉子。不需要 javascript 或 jquery，因为标签可以使用。所需要做的就是调整#mcu_31 上的边距以调整工具栏和页脚的高度。以下设置 tinymce 在其包含元素中响应。

/*Container, container body, iframe*/
.mce-tinymce, .mce-container-body, #code_ifr {
    min-height: 100% !important;
}
/*Container body*/
.mce-container-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
/*Editing area*/
.mce-container-body .mce-edit-area {
    position: absolute;
    top: 69px;
    bottom: 37px;
    left: 0;
    right: 0;
}
/*Footer*/
.mce-tinymce .mce-statusbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

修改是因为 TinyMCE 通过菜单/工具栏添加或删除更改了 id。无论您用它做什么，它都有效。