100% 高度溢出我的 flex 布局

Question

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

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

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

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

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()函数。

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

喜欢：

.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>

希望对您有所帮助！

100% 高度溢出我的 flex 布局

100% height overflows my flex layout

css

flexbox

quill