使 QuillJS 编辑器高度为 100%答案

【问题标题】：Make QuillJS editor height 100%使 QuillJS 编辑器高度为 100%
【发布时间】：2019-08-11 08:51:20
【问题描述】：

在下面的应用程序中，我希望 Quill 编辑器填充页眉和页脚中的现有空间。我尝试将其设为 100%，但这会在整个页面上添加一个滚动条。如何使 Quill 同时填充空间以适应屏幕大小。（如果高度降低编辑器高度应该降低）

var quill = new Quill('#editor', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'  // or 'bubble'
});

html,body {
  margin: 0;
  height: 100%;
}

#container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#header {
  height: 40px;
  background: red;
}

#footer {
  height: 40px;
  background: red;
}

#editor-container {
  height: 100%;
}

#editor {
  height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.snow.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.js"></script>
<div id="container">
  <div id="header">Header</div>
  <div id="editor-container">
    <div id="editor">Sample</div>
  </div>
  <div id="footer">Footer</div>
</div>

【问题讨论】：

标签： javascript css flexbox quill

【解决方案1】：

问题是来自ql-container 类的height: 100% 导致溢出。您可以尝试以下方法：

将flex: 1 添加到#editor-container 并使其成为列弹性框。
将flex: 1和width: 100%添加到#editor，对于大型内容添加overflow-y: auto

请看下面的演示：

var quill = new Quill('#editor', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'  // or 'bubble'
});

html,body {
  margin: 0;
  height: 100%;
}

* {
  box-sizing: border-box;
}

#container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#header {
  height: 40px;
  background: red;
}

#footer {
  height: 40px;
  background: red;
}

#editor-container {
  height: 100%;
  /* added these styles */
  flex: 1;
  display: flex; 
  flex-direction: column;
}

#editor {
  height: 100%;
  /* added these styles */
  flex: 1;
  overflow-y: auto;
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.snow.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.js"></script>
<div id="container">
  <div id="header">Header</div>
  <div id="editor-container">
     <div id="editor">Sample</div>
  </div>
  <div id="footer">Footer</div>
</div>

【讨论】：

【解决方案2】：

问题是 height: 100% 来自导致溢出的 ql-container 类。人们在 react-quill 中面临同样的问题

只需将以下 css 添加到您的代码中，它将覆盖 quill 样式

    .ql-container {
  min-height: 10rem;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ql-editor {
  height: 100%;
  flex: 1;
  overflow-y: auto;
  width: 100%;
}

【讨论】：