javascript - Make QuillJS editor height 100% - Stack Overflow

admin管理员组

文章数量:1195735

In the below application I want Quill editor to fill the existing space within header and footer. I tried making it 100% but that adds a scroll to the whole page. How to make Quill to fill the space at the same time to adapt screen size. (If the height is reduced editor height should be reduced)

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=".3.6/quill.snow.css" rel="stylesheet"/>
<script src=".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>

In the below application I want Quill editor to fill the existing space within header and footer. I tried making it 100% but that adds a scroll to the whole page. How to make Quill to fill the space at the same time to adapt screen size. (If the height is reduced editor height should be reduced)

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

Share Improve this question Follow edited Mar 20, 2019 at 16:51 kukkuz 42.4k66 gold badges6464 silver badges102102 bronze badges asked Mar 20, 2019 at 15:31 s1n7axs1n7ax 3,06966 gold badges2929 silver badges6262 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 12

The issue is height: 100% coming from the ql-container class which causes the overflow. You can try the below:

1. Add flex: 1 to #editor-container and make it a column flexbox too.

2. Add flex: 1 and width: 100% to #editor and for large content add overflow-y: auto

See demo below:

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>

The issue is height: 100% coming from the ql-container class which causes the overflow. The same issue people are facing in react-quill

Just add the following css to your code it will overwrite quill style

    .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%;
}

本文标签： javascriptMake QuillJS editor height 100Stack Overflow