[英]CSS grid items overflow grid container when using "align-content: space-between" and a sticky header
我有一個基本布局，其中我的 CSS 網格位於 flex 布局中，以便網格接管除頁腳之外的所有可用空間。
標題定位於position: sticky; .
網格內的項目沒有占據網格中可用的所有高度。
在我的 CSS 網格布局中，我使用align-content: space-between; 這樣兩個項目都位於網格的頂部和底部，中間有一些空白空間。
這在 Chrome 和 FF 上看起來不錯，但在 Safari（Mac 和 iOS）上，第二個網格項放在網格之外（通過我的粘性標題的高度）。
body { margin: 0; padding: 0; font-family: sans-serif; text-align: center; } .flex { min-height: 100vh; width: 100%; display: flex; flex-direction: column; } header { position: sticky; position: -webkit-sticky; top: 0; z-index: 999999; padding: 3em; background-color: tomato; } footer { padding: 1em; background-color: tomato; } .grid { width: 100%; -webkit-flex: 1; flex: 1; display: grid; grid-template-columns: 100%; grid-template-rows: auto auto; -webkit-align-content: space-between; align-content: space-between; background-color: khaki; } .item { box-sizing: border-box; padding: 0.6em; } .pink { background-color: pink; } .orange { background-color: orange; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="flex"> <header>Header</header> <div class="grid"> <div class="item pink">Item 1</div> <div class="item orange">Item 2</div> </div> <footer>Footer</footer> </div> </body> </html>
我通過將整個頁面包裝在另一個網格中以某種方式“修復”了這個問題。 但是，如果有人為此提出更好/更清潔的解決方案，我將不勝感激。
body { margin: 0; padding: 0; font-family: sans-serif; text-align: center; } .wrapper { min-height: 100vh; width: 100%; display: grid; flex-direction: column; grid-template-columns: 100%; grid-template-rows: 100%; } .flex { align-self: stretch; justify-self: stretch; background-color: lime; display: flex; flex-direction: column; } header { position: sticky; position: -webkit-sticky; top: 0; z-index: 999999; padding: 3em; background-color: tomato; } footer { padding: 1em; background-color: tomato; } .grid { width: 100%; -webkit-flex: 1; flex: 1; display: grid; grid-template-columns: 100%; grid-template-rows: auto auto; -webkit-align-content: space-between; align-content: space-between; background-color: khaki; } .item { box-sizing: border-box; padding: 0.6em; } .pink { background-color: pink; } .orange { background-color: orange; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="wrapper"> <div class="flex"> <header>Header</header> <div class="grid"> <div class="item pink">Item 2</div> <div class="item orange">Item 2</div> </div> <footer>Footer</footer> </div> </div> </body> </html>
更新：感謝@Michael_B 的評論，我找到了一種更簡潔的方法來解決這個問題，方法是更改min-height: 100%; 到height: 100%; 在.flex容器上。
CSS FLEXBOX：如何在 justify-content:space-between 網格中將最后一項與左側對齊
[英]CSS FLEXBOX: How to align last item to the left in a justify-content:space-between grid
當內容達到一定限制時，CSS Grid間隔無法正常工作
[英]CSS Grid space-between not working as expected when content reaches a certain limit
使用 justify-content: space-between header 和頁腳定位時如何防止垂直溢出？
[英]How to prevent vertical overflow when using justify-content: space-between for header and footer positioning?
如何使用 Flex 和 Space-between 直線對齊項目
[英]How to align items in straight line using Flex and Space-between
當行項目數變化時使用 Flexbox "justify-content: space-between"
[英]Using Flexbox "justify-content: space-between" when number of row items varies
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.