小编Mor*_*rix的帖子

页脚在底部有CSS网格吗?想不通吗?

我看过其他教程,了解如何在内容很少时使用 css 网格使页脚粘在底部。但我无法弄清楚。

如果你能帮忙,那就太好了。我正在学习 css grid,我花了几天时间断断续续地试图弄清楚它。

* {
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-family: helvetica;
}

body {
  background-color: #191919;
}

html body {
  height: 100%;
  width: 100%;
}

.grid {
  min-height: 100%;
  display: grid;
  grid-template-columns: 10% 40% 40% 10%;
  grid-template-rows: 50px 1fr auto;
  grid-row-gap: 10px;
  grid-template-areas:
  "header header header header"
  ". main main ."
  "footer footer footer footer";
}
/*Header*/

.header {
  grid-area: header;
  background-color: red;
  display: grid;
  position: fixed;
  width: 100%;
  grid-template-columns: 40% 60%;
  grid-template-areas:
  "title navigation" …
Run Code Online (Sandbox Code Playgroud)

html css grid footer

5
推荐指数
1
解决办法
9817
查看次数

标签 统计

css ×1

footer ×1

grid ×1

html ×1