当网格高度大于页面（设备）高度时，css网格容器出现问题答案

【问题标题】：issue with css grid container when grid height bigger then page(device) height当网格高度大于页面（设备）高度时，css网格容器出现问题
【发布时间】：2021-05-01 22:56:48
【问题描述】：

我对 css 网格有疑问，我用 css 网格构建了一个包含两个 div 的容器，我想将容器调整到页面中心。我使用此代码：

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

.container-fluid{
    width:100%;
    height : 100%;
    display:grid;
    grid-template-columns: 300px;
    grid-template-rows: 200px auto;
    justify-content: center;
    align-content: center;
    border:1px solid red;
}

.logo-container{
    background-color: khaki;
}

.form-container{
    height :540px;
    background-color: lightblue;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/media-query.css">
    <title>Login & Register User With Profile</title>
</head>
<body>
    <div class="container-fluid">
        <div class="logo-container">
               <h1>Logo</h1>
        </div>
        <div class="form-container">
          <h1>Form</h1>
        </div>
    </div>

    
    <link  rel="stylesheet" href="assets/css/all.css">
</body>
</html>

当网格容器高度大于页面高度时，会出现问题（请参阅代码结果）。当使用高度作为主体标签时，网格高度溢出以及从主体标签中删除高度时一切正常，但在此原位容器无法调整页面中心的容器。什么问题？

【问题讨论】：

标签： css css-grid

【解决方案1】：

简化您的代码，如下所示：

body {
  margin: 0; /* remove default margin */
}

.container-fluid {
  min-height: 100vh; /* at least screen height */
  display: grid;
  grid-template-columns: 300px;
  grid-template-rows: 200px auto;
  justify-content: center;
  align-content: center;
  border: 1px solid red;
  box-sizing:border-box; /* to consider the border inside the height */
}

.logo-container {
  background-color: khaki;
}

.form-container {
  height: 540px;
  background-color: lightblue;
}

<div class="container-fluid">
  <div class="logo-container">
    <h1>Logo</h1>
  </div>
  <div class="form-container">
    <h1>Form</h1>
  </div>
</div>

或者像下面这样：

body {
  margin: 0;
}

.container-fluid {
  height: 100vh; /* full height */
  display: grid;
  grid-template-columns: 300px;
  /* first row at 200px max-height and second row at 540px max-height */
  grid-template-rows: minmax(auto,200px) minmax(auto,540px); 
  justify-content: center;
  align-content: center;
  border: 1px solid red;
  box-sizing:border-box;
}

.logo-container {
  background-color: khaki;
}

.form-container {
  background-color: lightblue;
}

<div class="container-fluid">
  <div class="logo-container">
    <h1>Logo</h1>
  </div>
  <div class="form-container">
    <h1>Form</h1>
  </div>
</div>

【讨论】：