100％的高度溢出我的柔性布局

我用柔性盒创建了一个有些圣洁的布局布局。这完全像它应该没有任何滚动条 - 直到我插入Quill文本编辑器到我的content_wrapper容器。在这个容器里有顶部的工具栏，也是编辑器里面的主要div。100％的高度溢出我的柔性布局

当我尝试编辑的高度设置为100％它会创建一个溢出（我想是因为它需要身体的100％，但不承认这里面还有我的自定义蓝色工具栏上面）。

我该如何设置我的页面，编辑器是否不在页面底部以外？

请在全页面运行下载此代码段！

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

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

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

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

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

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

 
.contentbar { 
 
\t background-color: grey; 
 
\t 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"> 
 
\t 
 
</head> 
 

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

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

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

 
</html>

来源

2016-11-18 olop01

使用CSS的calc()功能。

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

像：

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

看一看下面的代码片段：

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

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

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

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

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

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

 
.contentbar { 
 
\t background-color: grey; 
 
\t 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"> 
 
\t 
 
</head> 
 

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

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

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

 
</html>

希望这有助于！

来源

2016-11-18 10:11:11

嗯，对我来说，你的片段仍然有相同的溢出，当我在全页面模式下查看它时：（ – olop01

哦，不好意思，我看到这段代码真正起作用，它只是被编辑器代码覆盖了。我的本地原型，并尝试它不会被覆盖，当编辑器创建它的代码 - 给我一秒:) – olop01

确实有效（我只需要调整CSS加载队列）！感谢您的解决方案！我真的很想知道为什么奎尔不会自己计算这个... – olop01

100％的高度溢出我的柔性布局

回答

相关问题