Question

在下面的应用程序中，我希望Quill编辑器填充页眉和页脚中的现有空间。我尝试将其设为100％，但这会向整个页面添加滚动。如何使鹅毛笔同时填充空间以适应屏幕尺寸。（如果减小高度，则应减小编辑器高度）

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>

Answer 1

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

将flex: 1添加到#editor-container并使其也成为列flexbox 。
在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>

使QuillJS编辑器高度为100％

1 个答案: