如何让Portlet填充空白空间，而非从其他Portlet垂直末端开始布局

针对Portlet因内部数据隐藏导致布局出现大空隙的问题，可通过以下几种方式解决：

• Flexbox自动填充
  给承载Portlet的容器设置Flex布局，让需要填补空白的Portlet占据剩余空间：

  .portlet-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh; /* 或父容器的固定高度 */
  }
  
  .fill-empty-space {
    flex-grow: 1;
    min-height: 0; /* 处理内容溢出场景 */
  }
  

• JavaScript动态计算高度
  监听数据隐藏事件，实时计算并设置目标Portlet高度：

  // 触发数据隐藏后的操作
  function adjustPortletHeight() {
    const target = document.querySelector('.target-portlet');
    const siblingsHeight = Array.from(target.parentElement.children)
      .filter(el => el !== target)
      .reduce((total, el) => total + el.offsetHeight, 0);
    target.style.height = `${target.parentElement.offsetHeight - siblingsHeight}px`;
  }
  
  // 绑定到数据隐藏的触发事件
  document.getElementById('hide-data-btn').addEventListener('click', adjustPortletHeight);
  

• CSS Grid轨道分配
  用Grid布局时，将目标Portlet所在行设为1fr，自动填充剩余空间：

  .portlet-grid {
    display: grid;
    grid-template-rows: auto 1fr; /* 第二行填充空白 */
    height: 100%;
  }
  

• 服务端渲染时设置高度
  若Portlet由后端生成，可根据数据是否隐藏直接指定高度：

  # 示例Python代码
  portlet_style = "height: 100%;" if data_hidden else ""
  render_portlet(style=portlet_style)
  

内容的提问来源于stack exchange，提问作者Jonathan Rostami