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％的高度溢出我的柔性佈局

回答

相關問題