实现Quill编辑器Snow工具栏固定及响应式布局需求

核心思路 #

放弃硬编码高度的方案，通过CSS Flexbox实现完全动态的布局：

• 工具栏自动适配宽度（按钮可换行），滚动时固定在视口顶部
• 编辑区域自动填充剩余视口空间，内容超出时仅自身垂直滚动
• 窗口resize时布局自动适配，无需额外JS计算

完整实现代码 #

HTML结构 #

将Quill的工具栏与编辑容器分离，方便独立控制布局：

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
</head>
<body>
  <!-- 独立工具栏容器 -->
  <div id="toolbar-container">
    <select class="ql-header">
      <option value="1"></option>
      <option value="2"></option>
      <option selected></option>
    </select>
    <button class="ql-bold"></button>
    <button class="ql-italic"></button>
    <button class="ql-underline"></button>
    <select class="ql-color"></select>
    <select class="ql-background"></select>
    <!-- 可根据需求添加更多工具栏按钮 -->
  </div>

  <!-- 编辑区域容器 -->
  <div id="editor-container"></div>

  <script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
</body>
</html>

CSS样式 #

用Flexbox实现动态高度分配，同时覆盖Quill默认样式以适配布局：

/* 重置默认样式，确保视口占满无冗余边距 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

/* 整体垂直Flex布局：工具栏不收缩，编辑区占剩余空间 */
body {
  display: flex;
  flex-direction: column;
}

/* 工具栏样式：自适应换行，滚动时固定在顶部 */
#toolbar-container {
  flex-shrink: 0; /* 防止被压缩 */
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 8px;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* 编辑容器：占满剩余高度，内容超出时滚动 */
#editor-container {
  flex: 1;
  overflow-y: auto;
}

/* 覆盖Quill默认高度，让编辑器占满容器 */
#editor-container .ql-editor {
  min-height: 100%;
  padding: 12px 16px;
}

/* 去掉Quill默认编辑器边框，避免重复样式 */
#editor-container .ql-container {
  border: none;
}

JavaScript初始化 #

指定自定义工具栏容器，完成Quill实例化：

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: '#toolbar-container' // 关联独立的工具栏容器
  },
  theme: 'snow'
});

关键细节说明 #

1. Flexbox动态布局：通过body的垂直Flex设置，让工具栏高度随按钮换行自适应，编辑区域自动填充剩余视口空间，彻底摆脱硬编码高度。
2. Sticky固定工具栏：position: sticky + top:0确保滚动时工具栏固定在顶部，同时保留了按钮自动换行的响应式能力。
3. 编辑区域独立滚动：仅给编辑容器设置overflow-y:auto，实现内容超出时局部滚动，工具栏始终保持在视野内。
4. Quill样式适配：覆盖编辑器默认的固定高度和边框，让其完全贴合容器尺寸，避免布局冲突。

验证场景 #

• 输入多行文本：编辑区域滚动，工具栏固定在顶部
• 缩小窗口宽度：工具栏按钮自动换行，布局无错乱
• 调整窗口高度：编辑区域自动适配剩余空间，无需修改代码

内容的提问来源于stack exchange，提问作者Nigel