Question

我正在尝试将图像在主要（粘性）底部而不是顶部的主网格区域中对齐。因此，当视口高度扩大时，图像上方必须有更多空间。

我试图使主要位置相对且img位置的绝对位置为底部0，但是图像将溢出标头区域。

这是当前的HTML和CSS代码：

@media screen and (max-width: 576px) and (orientation:portrait) {
  html,
  body {
    height: 100%;
  }
  body {
    margin: 0;
  }
  body {
    display: grid;
    grid-gap: 0px;
    height: 100%;
    grid-template-columns: 1fr;
    grid-template-areas: "nav" "main" "footer";
    grid-template-rows: 112px 1fr 50px;
  }
  nav {
    grid-area: nav;
  }
  main {
    grid-area: main;
  }
  footer {
    grid-area: footer;
  }
  nav {
    background-image: url('images/header_xs.png');
    background-repeat: no-repeat;
  }
  main {
    background-color: #ddf4fb;
  }
  footer {
    background-image: url('images/footer_xs.png');
    background-repeat: no-repeat;
  }
  .logo1_xs {
    margin-top: 40px;
    margin-left: 60px;
  }
  .logo2_xs {
    margin-top: 10px;
    margin-left: 60px;
  }
  .coastrunner1_xs {
    width: 100%;
  }
}

<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <nav>
    <img class="logo1_xs" src="images/logo1_xs.png" />
    <img class="logo2_xs" src="images/logo2_xs.png" />
  </nav>
  <main>
    <img class="coastrunner1_xs" src="images/coastrunner1_xs.png" />
  </main>
  <footer>
  </footer>
</body>

</html>

Answer 1

我已经使用以下CSS样式完成了此操作：

main {
  display: flex;
  flex-direction: column;
}

.flex_space {
  flex: 1;
}

并添加了一个空的div：

<main>
    <div class="flex_space"></div>
    <img class="coastrunner1_xs" src="images/coastrunner1_xs.png" />
</main>

有人有更好的解决方案吗？

图像垂直对齐网格区域的底部

1 个答案: