Question

我有一个基本布局，我的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>

Answer 1

我以某种方式通过将我的整个页面包装在另一个网格中来“修复”此问题。但是，如果有人为此提出了更好/更清洁的解决方案，我将不胜感激。

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网格项目在使用“ align-content：space-between”和粘性标头时会溢出网格容器

1 个答案: