Question

我需要自动调整行的大小，但是它没有调整大小。如何使行自动调整高度？

我的代码：

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  box-shadow: inset 2px 2px red, inset -2px -2px red
}

.body {
  display: grid;
  grid-template-rows: 1fr 40px;
  grid-template-columns: 100%;
}

.body div {
  box-shadow: inset 2px 2px red, inset -2px -2px red
}

.page {
  display: grid;
  grid-template-rows: 40px auto 40px;
  /* works if I but "calc(100vh - 120px)" in place of 'auto'*/
  grid-template-columns: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>

<body>
  <div class="body">
    <div class="page">
      <div class="pageHead">Head</div>
      <div class="pageContent">Content</div>
      <div class="pageFoot">Foot</div>
    </div>
    <div class="ypnNav">
      Nav
    </div>
  </div>
</body>

</html>

为什么不自动工作？我也尝试用1fr代替auto，但这也行不通。

在“网格模板区域”中解决这种情况的正确方法是什么？

Answer 1

您几乎不错，您只需要向flex-grow:1添加.body来填充您在body中设置的flex容器的空间。您的代码工作正常，但问题出在上部容器上。

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-shadow: inset 2px 2px red, inset -2px -2px red
}

.body {
  display: grid;
  grid-template-rows: 1fr 40px;
  flex-grow: 1; /*added*/
}

.body div {
  box-shadow: inset 2px 2px red, inset -2px -2px red
}

.page {
  display: grid;
  grid-template-rows: 40px auto 40px;
}

<div class="body">
  <div class="page">
    <div class="pageHead">Head</div>
    <div class="pageContent">Content</div>
    <div class="pageFoot">Foot</div>
  </div>
  <div class="ypnNav">
    Nav
  </div>
</div>

您还可以像下面这样简化并避免使用额外的包装器：

body {
  display: grid;
  grid-template-rows: 1fr 40px;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-shadow: inset 2px 2px red, inset -2px -2px red
}

body div {
  box-shadow: inset 2px 2px red, inset -2px -2px red
}

.page {
  display: grid;
  grid-template-rows: 40px auto 40px;
}

<div class="page">
  <div class="pageHead">Head</div>
  <div class="pageContent">Content</div>
  <div class="pageFoot">Foot</div>
</div>
<div class="ypnNav">
  Nav
</div>

使用display:contents（https://caniuse.com/#feat=css-display-contents），您仍然可以简化更多操作：

body {
  display: grid;
  grid-template-rows: 40px 1fr 40px 40px;
  height: 100vh;
  margin: 0;
  box-shadow: inset 2px 2px red, inset -2px -2px red
}

body div {
  box-shadow: inset 2px 2px red, inset -2px -2px red
}

.page {
  display: contents;
}

<div class="page">
  <div class="pageHead">Head</div>
  <div class="pageContent">Content</div>
  <div class="pageFoot">Foot</div>
</div>
<div class="ypnNav">
  Nav
</div>

自动调整行大小的网格模板不起作用

1 个答案: