100% 的高度溢出了我的弹性布局答案

【问题标题】：100% height overflows my flex layout100% 的高度溢出了我的弹性布局
【发布时间】：2026-02-21 16:40:01
【问题描述】：

我用 flex box 创建了一个有点圣杯的布局。这完全像它应该没有任何滚动条一样工作 - 直到我将 Quill 文本编辑器插入到我的 content_wrapper 容器中。在这个容器中，有顶部工具栏和内部编辑器的主 div。

当我尝试将编辑器的高度设置为 100% 时，它会产生溢出（我认为是因为它占用了 100% 的主体但没有识别出还有我的自定义蓝色工具栏它上面）。

我需要如何设置我的页面，使编辑器不会超出底部的页面？

请在完整视图页面上运行此代码 sn-p！

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

.main_wrapper {
	background-color: white;
	display: flex;
	min-height: 100vh;
	flex-direction: row;
}

.content_wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
}

aside.sidebar {
	background-color: grey;
	flex: 0 0 195px;
}

header.topbar {
	background-color: blue;
	flex: 0 0 50px;
}

main {
	background-color: white;
	flex: 1;
}

.contentbar {
	background-color: grey;
	flex: 0 0 405px;
}

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Prototype</title>

  <link rel="stylesheet" href="style.css">
  <!-- Text Editor Theme included stylesheets -->
  <link href="https://cdn.quilljs.com/1.1.5/quill.snow.css" rel="stylesheet">
	
</head>

<body>
	<div class="main_wrapper">
		<aside class="sidebar"></aside>
		<div class="content_wrapper">
			<header class="topbar"></header>
			<main>
				<div id="editor"></div>
			</main>
		</div>
		<div class="contentbar"></div>
	</div>
</body>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.1.5/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
	
  var options = {
      bounds: 'main',
	  theme: 'snow'
	};
	var editor = new Quill('#editor', options);
</script>

</html>

【问题讨论】：

标签： css flexbox quill

【解决方案1】：

使用 CSS 的 calc() 函数。

编辑器上方的工具栏占用了一些空间，您应该从.ql-container 的底部减少那么多空间。 .ql-toolbar 的 height 在不同的屏幕上可能会有所不同。

喜欢：

.ql-container {
  height: calc(100% - 42px); /* 100% - height of 'ql-toolbar' */
}

看看下面的sn-p：

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

.main_wrapper {
	background-color: white;
	display: flex;
	min-height: 100vh;
	flex-direction: row;
}

.content_wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
}

aside.sidebar {
	background-color: grey;
	flex: 0 0 195px;
}

header.topbar {
	background-color: blue;
	flex: 0 0 50px;
}

main {
	background-color: white;
	flex: 1;
}

.contentbar {
	background-color: grey;
	flex: 0 0 405px;
}

.ql-container {
  height: calc(100% - 42px);
}

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Prototype</title>

  <link rel="stylesheet" href="style.css">
  <!-- Text Editor Theme included stylesheets -->
  <link href="https://cdn.quilljs.com/1.1.5/quill.snow.css" rel="stylesheet">
	
</head>

<body>
	<div class="main_wrapper">
		<aside class="sidebar"></aside>
		<div class="content_wrapper">
			<header class="topbar"></header>
			<main>
				<div id="editor"></div>
			</main>
		</div>
		<div class="contentbar"></div>
	</div>
</body>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.1.5/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
	
  var options = {
      bounds: 'main',
	  theme: 'snow'
	};
	var editor = new Quill('#editor', options);
</script>

</html>

希望这会有所帮助！

【讨论】：

嗯，当我在全页模式下查看时，您的 sn-p 仍然有相同的溢出:(
哦不，抱歉，我看到这段代码确实有效，只是被编辑器代码覆盖了。我将在我的本地原型中尝试这个，并尝试在编辑器创建其代码时它不会被覆盖 - 给我一点时间 :)
确实有效（我只需要调整css加载队列）！感谢您提供此解决方案！我真的很想知道为什么 Quill 不自己计算这个......
@olop01 这是我的荣幸！