网格模板列未正确形成

Question

我和网格不太相似。我一般用flex。我有一个导航栏、侧面菜单和内容。

这里的内容我用黄色背景标出来了。这应该占据导航栏正下方页面的整个高度。我做错了什么？

我尝试设置内容 div

height: 100%;

但它什么也没做。

沙箱：https://codesandbox.io/p/sandbox/vigorous-albattani-1cjjts?file=%2Fsrc%2FApp.vue&selection=%5B%7B%22endColumn%22%3A46%2C%22endLineNumber%22%3A5% 2C%22startColumn%22%3A46%2C%22startLineNumber%22%3A5%7D%5D

Answer 1

你需要在你的

grid-area

类中更改你的

.grid-container-content

的值。你应该使用

grid-area: 2 / 2 / span 2;

。我在这里添加参考这样你就可以了解更多关于网格化的知识

.grid-container {
  display: grid;
  height: 100vh;
  overflow-y: hidden;
  grid-template-columns: 225px auto;
  grid-template-areas:
    "sidebar navbar"
    "sidebar content";
}

.grid-container-navbar {
  background-color: #131722;
  height: 40px;
}

.grid-container-sidebar {
  border-right: 1px solid white;
  background-color: #131722;
  grid-area: sidebar;
  height: inherit;
}

.grid-container-content {
  height: 100%;
  /* grid-area: content; */
  grid-area: 2 / 2 / span 2;
  overflow-y: auto;
  background-color: yellow;
}

<div class="grid-container">
   <div class="grid-container-navbar"></div>
   <div class="grid-container-sidebar"></div>
   <div class="grid-container-content"></div>
</div>