使用“align-content: space-between”和粘性标题时，CSS 网格项会溢出网格容器
[英]CSS grid items overflow grid container when using "align-content: space-between" and a sticky header
问题描述
I have a basic layout where my CSS grid is positioned within a flex layout so that the grid is taking over all the available space that is left besides the Footer.
我有一个基本布局，其中我的 CSS 网格位于 flex 布局中，以便网格接管除页脚之外的所有可用空间。
The header is positioned with position: sticky;标题定位于position: sticky; . .
The items within the grid are not taking up all the height that is available in the grid.网格内的项目没有占据网格中可用的所有高度。
In my CSS grid layout I'm using align-content: space-between;在我的 CSS 网格布局中，我使用align-content: space-between; so that the both items are positioned at the top and bottom of the grid with some blank space in-between.这样两个项目都位于网格的顶部和底部，中间有一些空白空间。
This looks good on Chrome and on FF but on Safari (Mac & iOS) the second grid item is put outside of the grid (by the height of my sticky header).这在 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>
1 个解决方案
解决方案1
1 2019-01-15 19:32:41
I somehow "fixed" this by wrapping my whole page within another grid.我通过将整个页面包装在另一个网格中以某种方式“修复”了这个问题。 But I'd really appreciate if someone comes up with a better/cleaner solution to this.但是，如果有人为此提出更好/更清洁的解决方案，我将不胜感激。
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>
UPDATE: Thanks to @Michael_B 's comment I found a cleaner way to fix this by changing min-height: 100%;更新：感谢@Michael_B 的评论，我找到了一种更简洁的方法来解决这个问题，方法是更改min-height: 100%; to height: 100%;到height: 100%; on the .flex container.在.flex容器上。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.