Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.12.2019, 19:02
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

css grid auto flow row растянуть одну из строк
<style>
  body,
  html {
    height: 100%;
    padding: 0;
    margin: 0;
  }

  /* это не работает */
  .a {
    display: grid;
    grid-auto-flow: row;
  }

  .c {
    display: grid;
    /* place-self: center stretch; */
    justify-self: stretch;
    align-self: stretch;
  }

  /* это работает */
  /* .a {
    height: 100%;
    display: grid;
    grid-template-rows: max-content 1fr max-content;
  } */
</style>

<div class="a">
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>


1) как растянуть класс .c, чтобы он был как для этого правила?
<style>
.someclass { 
  grid-template-rows: max-content 1fr max-content;
}
</style>

соответственно для grid-auto-flow: row

2) обязательно-ли указывать height: 100%, или это можно как-то по другому записать, margin: auto какой-нибудь...?
Ответить с цитированием
  #2 (permalink)  
Старый 04.12.2019, 06:43
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207


<style>
  body,
  html {
    height: 100%;
    padding: 0;
    margin: 0;
  }

  .a {
    display: grid;
    height: 100%;
    grid-auto-rows: min-content 1fr min-content;
  }
</style>

<div class="a">
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>
Ответить с цитированием
  #3 (permalink)  
Старый 04.12.2019, 06:54
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Можно из JS высчитывать высоту для c
<style>
  body,
  html {
    height: 100%;
    padding: 0;
    margin: 0;
  }

  .a {
    display: grid;
    height: 100%;
    align-content: start;
  }
</style>

<div class="a">
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>

<script>
   const someCalculation = () => 66;
   const height = someCalculation();
   const c = document.querySelector('.c');
   c.style.setProperty('height', height);
</script>
Ответить с цитированием
  #4 (permalink)  
Старый 04.12.2019, 12:14
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

надо именно через css grid
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Функция для перевода размера из байтов в понятный для человека формат Антон Крамолов Ваши сайты и скрипты 4 05.04.2013 16:42