[英]100% height overflows my flex layout
我用柔性盒創建了一個有點聖杯的布局。 這完全像沒有任何滾動條那樣工作 - 直到我將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>
使用CSS的calc()函數。
編輯器上方的工具欄占用了一些空間，你應該從.ql-container的底部減少那么多的空間。 .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>
希望這可以幫助！
Safari flexbox：當它有一個高度：100% 的孫子時，高度為 100% 的 flex 容器的子級溢出
[英]Safari flexbox: child of flex container with height:100% overflows when it has a grandchild with height:100%
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.