为什么在代码中使用 grid-template-rows 时 css 网格行高会被破坏？ [复制]答案

【问题标题】：Why is css grid row height smashed when grid-template-rows is being used in code? [duplicate]为什么在代码中使用 grid-template-rows 时 css 网格行高会被破坏？ [复制]
【发布时间】：2018-06-23 03:12:57
【问题描述】：

我刚刚开始学习 CSS 网格，但遇到了问题。我不知道该怎么做，但我认为我的代码没问题，因为它确实验证了（html 和 css）。我在我的css中使用了grid-template-rows，但显示就像它没有使用过一样。如果我将更多文本添加到我的 html 块之一（例如：标题），那么该行将变得更高 - 因此即使使用网格模板行，它也会像自动一样。此外，菜单上方和下方都有空白区域。我这两天一直在纠结这个问题，找不到问题。我没看错什么？

.container {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 23.2% 76.8%;
  grid-template-rows: 30.0% 8.0% 50.0% 12.0%;
  color: white;
}
.header {
  grid-column: 1/3;
  grid-row: 1/2;
  background-color: red;
}
.menu {
  grid-column: 1/3;
  grid-row: 2/3;
  background-color: blue;
}
.sidebar {
  grid-column: 1/2;
  grid-row: 3/4;
  background-color: yellow;
}
.main {
  grid-column: 2/3;
  grid-row: 3/4;
  background-color: green;
}
.footer {
  grid-column: 1/3;
  grid-row: 4/5;
  background-color: orange;
}

<!doctype HTML>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" type="text/css" href="./style.css">
      <script src="./code.js"></script>
      <title>TEST SITE</title>
   </head>

   <body class="container">

     <header class="header">
       <p>Header</p>
     </header><!-- header -->
     <menu class="menu">
       <p>Menu</p>
     </menu><!-- menu -->
     <aside class="sidebar">
       <p>Sidebar</p>
     </aside><!-- aside -->
     <main class="main">
       <p>Body</p>
     </main><!-- main -->
     <footer class="footer">
       <p>Footer</p>
     </footer><!-- footer -->
   </body><!-- body -->
</html><!-- html -->

Firefox 57.0.4

Opera 50.0.2762.58

【问题讨论】：

需要将那些 MENU 标签（无效的 HTML）更改为 NAV 标签。可能会解决那里的空白问题。
添加这个：.container { height: 100vh; }

标签： html css css-grid

【解决方案1】：

使用百分比单位创建网格时，需要设置适当的维度链以使百分比起作用。在这里，BODY 被用作网格，因此请确保以下行在样式中：

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

【讨论】：

【解决方案2】：

您应该从正文中删除您的类容器并将其放入一个 div 中。你的代码应该是这样的。

<div class="container">
<header class="header">
       <p>Header</p>
     </header><!-- header -->
     <menu class="menu">
       <p>Menu</p>
     </menu><!-- menu -->
     <aside class="sidebar">
       <p>Sidebar</p>
     </aside><!-- aside -->
     <main class="main">
       <p>Body</p>
     </main><!-- main -->
     <footer class="footer">
       <p>Footer</p>
     </footer><!-- footer -->
</div>

【讨论】：