Javascript 使QuillJS编辑器高度为100%

在下面的应用程序中，我希望羽毛笔编辑器填充页眉和页脚中的现有空间。我试着让它100%，但这增加了一个滚动到整个页面。如何使鹅毛笔在填充空间的同时适应屏幕大小。（如果降低了高度，则应降低编辑器高度）

var quill=新的quill（“#编辑器”{
模块：{
工具栏：[
[{头：[1，2，false]}]，
[“粗体”、“斜体”、“下划线”]，
[“图像”，“代码块”]
]
},
占位符：“创作史诗…”，
主题：“雪”//或“泡泡”
});
html，正文{
保证金：0；
身高：100%；
}
#容器{
身高：100%；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
}
#标题{
高度：40px；
背景：红色；
}
#页脚{
高度：40px；
背景：红色；
}
#编辑器容器{
身高：100%；
}
#编辑{
身高：100%；
}

标题
样品
页脚
问题是
高度：100%
来自导致溢出的
ql容器类。您可以尝试以下方法：

将
flex:1
添加到
#编辑器容器中
，并使其成为列flexbox

将
flex:1
和
width:100%
添加到
#editor
中，对于大型内容，添加
overflow-y:auto

请参见下面的演示：


var quill=新的quill（“#编辑器”{
模块：{
工具栏：[
[{头：[1，2，false]}]，
[“粗体”、“斜体”、“下划线”]，
[“图像”，“代码块”]
]
},
占位符：“创作史诗…”，
主题：“雪”//或“泡泡”
});
html，正文{
保证金：0；
身高：100%；
}
* {
框大小：边框框；
}
#容器{
身高：100%；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
}
#标题{
高度：40px；
背景：红色；
}
#页脚{
高度：40px；
背景：红色；
}
#编辑器容器{
身高：100%；
/*添加了这些样式*/
弹性：1；
显示器：flex；
弯曲方向：立柱；
}
#编辑{
身高：100%；
/*添加了这些样式*/
弹性：1；
溢出y：自动；
宽度：100%；
}

标题
样品
页脚