CSS grid items overflow grid container when using "align-content: space-between" and a sticky header
Question
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.
The header is positioned with 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; 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).
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 answers
solution1
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%; to height: 100%; on the .flex container.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.