网格区域不会移动到具有百分比值的网格行中

Question

我可以让 div 移动到正确的列而不是正确的行。

这将在正确的列中显示蓝色矩形，但无论出于何种原因，它都没有移到我需要的行中。谢谢大家的帮助。

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 10% 80% 10%;
}

#navigation {
  grid-column: 2/2;
  grid-row: 2/2;
  height: 400px;
  width: 100%;
  background-color: blue;
}

<div id="navigation"></div>
<div id="menunBar"></div>
<div id="mainContent"></div>

Answer 1

您正在使用百分比来设置行高。这意味着 .

设置网格容器的高度。

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 10% 80% 10%;
  height: 100vh; /* new */
}

#navigation {
  grid-column: 2/3; /* error correction */
  grid-row: 2/3;
  background-color: blue;
}

body {
  margin: 0;
}

<div id="navigation"></div>
<div id="menunBar"></div>
<div id="mainContent"></div>

更多详情：

How to make a div 100% height of the browser window?

网格区域不会移动到具有百分比值的网格行中

Grid area won't move into grid rows with percentage values

html

css

css-grid