当网格高度大于页面（设备）高度时，使用css网格容器发出问题
我对css网格有一个问题，我用css网格构建了一个包含两个div容器，我想把容器调整到页面中心。我使用以下代码：
null
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>null
如您所见，当网格容器高度大于页面高度时，就会出现问题（请参阅代码结果）。当使用高度为主体标签，网格高度溢出和当删除高度从主体标签，一切都是可以的，但在这个原位容器不能调整在页面中心的容器。什么是问题？
共有1个答案
像下面这样简化代码：
null
css lang-css prettyprint-override">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>-
问题内容： 我在一个网格中嵌套了两个网格。不幸的是，右边的嵌套网格设置行的高度，以使左边和右边的网格都具有相同的高度，额外的空间在class的div之间共享。如何设置右侧嵌套网格的行以调整内容的大小，使其与左侧嵌套行的高度相同？ 问题答案： 您可以尝试 参考 您也可以只使用或
-
场景- > TableView高度是使用纵横比相对于superview的高度动态设置的。 TableViewCell的高度是根据表格视图的高度计算的： 问题 - 最初在委托方法中没有正确计算表格视图高度。但在滚动单元格后正确计算。 尝试的解决方案： 在视图中重新加载。 调用 在单元格中进行. 有什么方法可以正确计算出这个表格的高度吗？
-
问题内容： 我有一张桌子，应该始终占据屏幕高度的一定百分比。大多数行的高度都是固定的，但我有一排应该伸展以填充可用空间。万一该行中单元格的内容超出了所需的高度，我希望使用overflow：hidden剪切内容。 不幸的是，表和行不遵守max-height属性。（这在W3C规范中）。当单元格中的文本过多时，表格将变高，而不是坚持指定的百分比。 如果我为其指定一个固定的高度（以像素为单位），则可以使表
-
问题内容： 我需要使我的网页高度适合屏幕尺寸的高度，而无需滚动。 HTML CSS 问题答案： 一个快速，简洁，有效的独立解决方案，带有内联CSS，无jQuery要求。AFAIK也可以从IE9使用。
-
问题内容： 我正在使用：https : //github.com/angular-ui/ui-grid.info/tree/gh- pages/release/3.0.0-RC.18 当我对值进行硬编码时，如上所示，网格扩展了，一切都按预期工作。 但是，如果我执行以下操作… 高度打印在div中，并且div变宽，但是内容本身仅扩大到340px左右。剩下的空间是空白的，所以我只看到8行，而不是25行。
-
我目前正在做一个项目，我找不到任何解决方案。我希望Gridpane行的高度从该行中一个特定列的宽度动态计算。整个Gridpane必须可调整大小，其余可用空间应位于下面的另一行，以便根据该单元格内的元素保留该单元格的纵横比。孩子们，有什么想法吗？ 我希望单元格1,0和1,1可以调整大小，并且通过增加其宽度，可以清楚地看到第0行和第1行的高度不应该平均增加。如果还剩下任何高度，我希望第3行可以承受，因