2

我用 flex box 创建了一个有点圣杯的布局。这完全像它应该没有任何滚动条一样工作 - 直到我将 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>

4

1 回答 1

5

使用 CSS 的calc()功能。

编辑器上方的工具栏占用了一些空间，您应该从.ql-container. 的可能在不同的屏幕上有所不同height。.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);
}
<!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>

希望这可以帮助！

于 2016-11-18T10:11:11.063 回答