Блог

Главная - Вопросы по программированию - Не работает автоматическое изменение размера строки в шаблоне сетки

Не работает автоматическое изменение размера строки в шаблоне сетки

#html #css #css-grid

#HTML #css #css-grid

Вопрос:

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

Мой код:

 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>

Почему не работает auto? Я также пробовал 1fr вместо auto, но это тоже не работает.

Каков правильный способ решения такой ситуации в ‘grid-template-areas’?

Ответ №1:

У вас почти все готово, вам просто нужно добавить flex-grow:1 в .body , чтобы заполнить пространство контейнера flex, который вы устанавливаете в 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>