TinyMCE 4和100％高度的包含元素

JDR 发表于 Dev

角色扮演游戏

我正在从TinyMCE 3迁移到4。

但是，我在使TinyMCE填充其100％高度的容器时陷入困境（它与TinyMCE 3兼容）。

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

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

如您在实时小提琴中所看到的，它恰好是工具栏“太高”的像素数量：即，它太高了34px（工具栏的高度）。

此方法有效，但不会随浏览器自动调整大小，它使用的calc（）目前仅支持约79％：http : //jsfiddle.net/MLJaN/2/

现在，我正在寻找一种纯CSS（无calc（）函数）解决方案，以使整个编辑器填充其容器并可以灵活地调整大小。

任何指针将不胜感激。

用户名

当您使用锤子时，每个问题都像钉子。无需使用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;
}