Materialize CSS同高列问题求助：左右面板高度无法同步

嘿，这个问题我之前碰到好多次了，Materialize默认的row和col布局确实不会自动让子列高度同步，尤其是当其中一列内容动态增加的时候。给你几个实用的解决方案，按需选择就行：

方案一：Flexbox布局（最推荐，零JS） #

Materialize的row容器可以通过启用Flexbox特性，让子列自动拉伸匹配最高列的高度。你只需要给#main-row添加几行CSS：

#main-row {
  display: flex;
  flex-wrap: wrap;
}

• display: flex会让子元素（你的两个col）默认等高对齐；
• flex-wrap: wrap是为了保证在小屏幕下（比如你的hide-on-small-only生效场景）布局依然能正常换行，不会出现内容溢出的问题。

这个方案最省心，不需要修改HTML结构，也不用额外的JS逻辑，现代浏览器兼容性拉满。

方案二：JavaScript动态同步高度 #

如果因为某些原因不能用Flexbox，也可以通过JS动态计算并设置两列的高度。写个简单的函数就行：

function syncPanelHeights() {
  const leftPanel = document.getElementById('left-panel');
  const rightPanel = document.getElementById('right-panel');
  
  // 获取两列的当前高度，取最大值
  const maxHeight = Math.max(leftPanel.offsetHeight, rightPanel.offsetHeight);
  
  // 给两列设置相同高度
  leftPanel.style.height = `${maxHeight}px`;
  rightPanel.style.height = `${maxHeight}px`;
}

// 页面加载时初始化高度
window.addEventListener('load', syncPanelHeights);
// 窗口大小变化时重新计算
window.addEventListener('resize', syncPanelHeights);
// 重要：当右侧新增消息后，记得手动调用syncPanelHeights()更新高度

这个方法需要注意，每次右侧消息新增后都要调用函数更新高度，不然高度不会自动同步。

方案三：CSS Grid布局 #

如果你的项目不需要兼容老浏览器，CSS Grid也是个不错的选择：

#main-row {
  display: grid;
  /* 对应m2和m10的宽度比例：m2占1/6，m10占5/6 */
  grid-template-columns: 16.666% 83.333%;
}

/* 小屏幕下调整布局，适配hide-on-small-only */
@media (max-width: 600px) {
  #main-row {
    grid-template-columns: 100%;
  }
}

Grid布局下的子元素默认也会自动等高，配合媒体查询可以轻松适配不同屏幕尺寸。

内容的提问来源于stack exchange，提问作者Joginder Pawan Kumar