Сделать высоту редактора QuillJS равной 100%

В приведенном ниже приложении я хочу, чтобы редактор 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

20.03.2019 16:31

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

12 788

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Проблема в том, что height: 100% происходит из класса ql-container, что вызывает переполнение. Вы можете попробовать следующее:

Добавьте 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>

20.03.2019 17:51

Проблема заключается в высоте: 100% исходит из класса ql-контейнера, который вызывает переполнение. Та же проблема, с которой люди сталкиваются в 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%;
}

03.02.2022 20:46

Другие вопросы по теме

CSS HTML 1 большое квадратное поле, разделенное на 4 поля с полным фоновым изображением, наведение на определенное поле изменит фоновое изображение

Создание адаптивной таблицы лидеров

Свойство column-count не работает должным образом в Safari и Firefox

Как увеличить высоту редактора WYSWYG?

Отзывчивый iframe, содержащий адаптивный контент

Как отобразить несколько динамических таблиц на веб-странице

Автоматическая прокрутка вправо страницы (в зависимости от размера изображения)

Предотвратить расширение гибкого элемента за пределы контейнера

Выравнивание заголовка и ячеек таблицы HTML/CSS

Непрозрачность встроенного блока

Сделать высоту редактора QuillJS равной 100%

Ответы 2

Другие вопросы по теме

Похожие вопросы