CSS Сетка для одного столбца, чтобы иметь максимальную высоту, если другие строки меньше, но затем для корректировки выше, если другие строки больше - PullRequest
Новая
       9

CSS Сетка для одного столбца, чтобы иметь максимальную высоту, если другие строки меньше, но затем для корректировки выше, если другие строки больше

0 голосов
/ 19 апреля 2020

У меня есть простая CSS Сетка, которую я бы хотел, чтобы в 3-м столбце были специальные автоматические регулировки высоты. Стиль сетки: 

.grid{
        display:grid;
        grid-template-columns: 7fr 10fr 15fr;
        border-top: 1px solid black;
        border-right: 1px solid black;
    }
    .grid > span{
        padding: 4px 4px;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
    }

Элементы span: 

<span class="new_data" style="">...........</span>
<span class="new_data" style="">............</span>
<span class="new_data" style="max-height: 400px; overflow: auto;">................</span>

Столбец DETAILS может быть коротким или длинным. Хотелось бы, чтобы этот столбец имел следующие взаимодействия по высоте:

  1. При коротких значениях - высота строки подстраивается под содержимое - ОК (2-й ряд, например)

  2. Когда очень длинный - высота строки регулируется до 400 пикселей с помощью полосы прокрутки - ОК (1-й и 4-й ряд)

  3. Когда первые 2 столбца превышают высоту 400 пикселей, я бы например, столбец «Подробности» автоматически увеличивается за пределы 400 пикселей, чтобы соответствовать высоте двух других столбцов с полосой прокрутки, если это необходимо - НЕ СЕЙЧАС (3-я строка). Когда это происходит, высота DETAILS фиксируется на 400px, и ниже заметен зазор. Хотелось бы, чтобы это автоматически увеличивалось до высоты строки, когда это происходит.

Как это можно сделать? Javascript / Jquery решения приветствуются.

enter image description here

1 Ответ

0 голосов
/ 19 апреля 2020

Чистое CSS решение будет представлять собой комбинацию max-height:450px; и min-height:100%

Процент в этом случае относится к высоте строки сетки, а не к контейнеру сетки, который будет определяться самым высоким элементом в ряд. 

/* Not needed for the solution */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body * {
  padding: 10px;
  border: 1px solid;
}


/* Not needed for the solution */


/* The solution */

[grid] {
  display: grid;
  grid-template-columns: 7fr 10fr 15fr;
  border-top: 1px solid black;
  border-right: 1px solid black;
  width: 400px;
  margin: 0 auto;
}

[details] {
  max-height: 450px;
  min-height: 100%;
  overflow: auto;
}
<div grid>
  <div flag>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim </div>
  <div content>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim </div>
  <div details> some text</div>
  <div flag>
    Lorem ipsum dolor sit amet, consectetur epteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div content>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
  </div>
  <div details>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div flag>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in
  </div>
  <div content>
    Lorem ipsum dolor sit
  </div>
  <div details>
    I'm as tall as my tallest sibling.
  </div>
</div>

В соответствии с spe c Есть несколько колебаний и их установленное вычисленное значение.

Случай 1: Подробности выше 450px;

Нарушение: height > max-height.

Для этого вычисленная высота будет нашей max-height:450px

min-height:100% не будет иметь никакого эффекта, потому что именно детали определяют высоту.

Случай 2: Подробности короче 450px;

Нарушение: height < min-height.

Для этого вычисленная высота будет нашей min-height:100% (такой же высокой, как у самого высокого брата). Но ключ здесь в том, что max-height полностью игнорируется.

Это работает для двух другие случаи.

...