使用 CSS-Grid 的页脚行不会在移动设备视图中停留在底部答案

【问题标题】：Footer row using CSS-Grid won't stick to bottom in mobile-device view使用 CSS-Grid 的页脚行不会在移动设备视图中停留在底部
【发布时间】：2019-06-12 20:52:42
【问题描述】：

我正在使用 HTML 和 CSS（网格）来制作一个相当简单的网站。主网格有 1 列和 5 行。第 4 行有一个 1 行 3 列的网格。

除了我在 Chrome 的开发者工具中切换设备工具栏外，一切正常。页脚向上移动并覆盖了其中有一个网格的第 4 行。

带有网格的第 4 行设置为使用@media 屏幕标记进行更改。当屏幕小于 840px 时变为 1 列 4 行。

主包装代码：

.wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 100%;
  grid-template-columns: 100%;
  -ms-grid-rows: 5% 15% 20% 60% 30%;
  grid-template-rows: 5% 15% 20% 60% 30%;

  height: 100vh;
}

主包装器中的第 4 行，其中有一个网格：

@media (max-width: 840px) {
  .main_services_wrap {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: 5% 100% 100% 100%;
    grid-template-rows: 5% 100% 100% 100%;
  }
}

【问题讨论】：

标签： html css css-grid

【解决方案1】：

我把这个答案写得很糟糕。为了重申我的问题，我使用 CSS Grid 将第 5 行用作页脚。每当主行（第 4 行）中的内容超过其高度时，内容就会在页脚行下方展开，并且页脚行保持原位。

我的问题是我给了第 4 行，即主要内容，一个指定的高度。因此，当第 4 行的内容超过该高度时，它会扩展到第 5 行，即页脚。我在样式表中将第 4 行的高度设置为 auto，现在第 4 行随内容扩展，并强制第 5 行（页脚）保持在页面底部。

【讨论】：

【解决方案2】：

.wrapper {
  display: flex;  
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.header {
  background: red;
}

.footer {
  background: blue;
}

.main {
  text-align: left;
  background: yellow;
}


@media all and (min-width: 600px) {
  .aside { flex: 1 0 0; }
}

body {
  padding: 2em; 
}

<!DOCTYPE html>
<html>
<head>
<body>
<div class="wrapper">
  <header class="header">Header</header>
  <article class="main">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
  </article>
  <footer class="footer">row1</footer>
  <footer class="footer">row2</footer>
  <footer class="footer">row3</footer>
  <footer class="footer">row4</footer>
  <footer class="footer">row5</footer>
</div>
</body>
</html>

【讨论】：