Пусть высший элемент контролирует высоту гибкой обертки - PullRequest
Новая
       16

Пусть высший элемент контролирует высоту гибкой обертки

0 голосов
/ 30 октября 2018

Я разрабатываю мегаменю нижнего колонтитула, содержащее несколько подменю. Содержание динамично. Я хочу, чтобы наибольшее подменю охватывало весь столбец обертки, и поэтому также устанавливаю его высоту.

Я нашел решение, в котором я измеряю высоту блоков и устанавливаю высоту обертки на высоту самого высокого блока.

Пока все работает нормально - решение кажется немного наивным, и что-то подсказывает мне, что есть более элегантные решения. Желательно без JavaScript. Как вы думаете? Я пытался использовать CSS-сетку, но не смог получить желаемый результат. 

nav {
  margin: 0 auto;
  width: 80%;
  display: flex;
  flex-direction: column;
  align-content: center;
  flex-wrap: wrap;
}

Высота элемента-оболочки устанавливается с помощью Javascript 

/*
  Set the height of the wrapper to the highest blocks height
*/
function rearrangeBlocks() {
  // Grab the whole menu
  const section = document.querySelector('nav');
  // Grab all the blocks
  const allBlocks = document.querySelectorAll('.block');
  // Grab the highest block
  const longestBlock = Array.from(allBlocks).reduce((longest, current) => {
    if (current.getBoundingClientRect().height > longest.getBoundingClientRect().height) {
     return current; 
    } else {
      return longest;
    }
  });

  // Set the height of the menu to the same height of the highest menu item
  section.style.height = `${longestBlock.offsetHeight}px`;
}

Codepen

1 Ответ

0 голосов
/ 30 октября 2018

Изменить немного CSS 

nav {
  margin: 0 auto;
  width: 80%;
  display: flex;
  flex-direction: row;
  background: red;
}

https://codepen.io/anon/pen/RemZmb

...