CSS 内容为空的网格布局（高度）

Question

请原谅天真的html新手问题：

我正在制作一个 html 布局，我想从没有占位符文本开始。只是将屏幕分成三个部分的空元素，稍后我将在其中插入内容。

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      #ui {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        height: 100%;
      }
      
      .layout-block {
        background-color: #4472C4;
        margin: 3px;
      }
    </style>
  </head>
  <body>
    <div id="ui">
      <div id="section-1" class="layout-block"></div>
      <div id="section-2" class="layout-block"></div>
      <div id="section-3" class="layout-block"></div>
    </div>
  </body>
</html>

我期望的是这样的：

我得到的是这样的：

我知道这是因为元素的高度由于没有任何内容而折叠为零。但是我该怎么做才能解决这个问题？

我希望网格容器（ID 为 ui）扩展到屏幕高度的 100%，我希望我的空 div扩展高度以填充它。

非常感谢您的帮助！

Answer 1

只需将 #ui 样式中的 height: 100% 替换为 height: 100vh。它将为您的网格容器提供视口 100% 的高度。

Obs：我在网格元素之间添加了一个间隙，只是为了让它们的界限可见。

<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
    #ui {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      height: 100vh;
      gap: 1rem;
    }
    
    .layout-block {
      background-color: #4472C4;
      border: 3px;
    }
  </style>
</head>

<body>
  <div id="ui">
    <div id="section-1" class="layout-block"></div>
    <div id="section-2" class="layout-block"></div>
    <div id="section-3" class="layout-block"></div>
  </div>
</body>

</html>

Answer 2

#ui 展开以填充可用高度的 100%。但是由于没有内容，也没有填充或边距，所以 <html> 和 <body> 都折叠到零高度。添加：

html,body{ height: 100%; }

CSS 内容为空的网格布局（高度）

CSS Grid Layout With Empty Content (Height)

html

css

css-grid