Question

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

当我尝试将编辑器的高度设置为100％时，它会产生溢出（我想因为它需要100％的身体，但不会识别出我的自定义蓝色工具栏它上面）。

如何设置我的页面，编辑器不会在页面底部之外？

请在完整视图页面上运行此代码段

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>

Answer 1

使用CSS的calc()功能。

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

像：

.ql-toolbar

请看下面的代码段：

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

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);
}

希望这有帮助！

100％的高度溢出我的flex布局

1 个答案: