Шаблон сетки не позволяет автоматически изменить размер строки - PullRequest
Новая
       2

Шаблон сетки не позволяет автоматически изменить размер строки

4 голосов
/ 31 марта 2019

Мне нужно автоматически изменить размер строки, но это не изменение размера.Как сделать так, чтобы ряд автоматически настраивал высоту?

Мой код: 

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, но это тоже не работает.

Как правильно решить эту ситуацию в 'grid-template-area'?

1 Ответ

2 голосов
/ 31 марта 2019

Вы почти хороши, вам просто нужно добавить flex-grow:1 к .body, чтобы заполнить пространство гибкого контейнера, установленного в body.Ваш код работает нормально, но проблема в верхнем контейнере. 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...