我正在设计一个包含许多子菜单的页脚巨型菜单。内容是动态的。我想使最大的子菜单跨越包装器的整个列，因此也要设置其高度。
我想出了一种解决方案，其中，我要测量块的高度并将包装器的高度设置为最高块的高度。
虽然可以，但是-该解决方案有些天真，并且告诉我还有更优雅的解决方案。最好没有JavaScript。您如何看待？我尝试使用CSS网格，但无法获得想要的结果。
nav {
margin: 0 auto;
width: 80%;
display: flex;
flex-direction: column;
align-content: center;
flex-wrap: wrap;
}
wrapper元素的高度是使用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`;
}