Ionic平板应用固定列布局需求：左侧菜单固定，右侧列独立滚动

兄弟，我太懂你这种布局头疼的感觉了——在Ionic平板应用里想把左侧菜单固定不动，让右侧内容独立滚动，结果试了好几种方法都踩坑了对吧？我给你两个针对性的解决方案，比你之前试的方法更稳定适配各种平板尺寸：

别再用固定像素高度了，改用视口单位+Flexbox来分配空间，完美适配不同屏幕：

• 给整个页面的根容器设置占满视口高度，并用Flex布局拆分左右栏
• 左侧菜单设置flex-shrink: 0，确保它不会被压缩，宽度可以设固定值或百分比
• 右侧内容栏设置flex: 1占满剩余空间，同时开启垂直滚动

对应的Sass代码示例：

// 页面根容器
.page-wrapper {
  display: flex;
  height: 100vh;
  overflow: hidden; // 彻底避免页面整体滚动

  // 左侧固定菜单
  .fixed-menu {
    flex-shrink: 0;
    width: 280px; // 可根据需求调整，也可用25%这类百分比
    background-color: #f5f5f5;
    padding: 1rem;
  }

  // 右侧可滚动内容
  .scrollable-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
  }
}

其实Ionic早就为这种场景做了原生组件——ion-split-pane，它会自动识别屏幕尺寸，平板上固定显示左侧菜单，手机上变成滑出式侧边栏，完全不用自己写适配代码：

<ion-split-pane contentId="main-content">
  <!-- 左侧固定菜单 -->
  <ion-menu contentId="main-content">
    <ion-header>
      <ion-toolbar>
        <ion-title>我的菜单</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item button>首页</ion-item>
        <ion-item button>设置</ion-item>
        <ion-item button>关于</ion-item>
        <!-- 更多菜单项 -->
      </ion-list>
    </ion-content>
  </ion-menu>

  <!-- 右侧独立滚动的内容区 -->
  <ion-router-outlet id="main-content"></ion-router-outlet>
</ion-split-pane>

这个组件会自动处理滚动逻辑：右侧的ion-router-outlet里的内容会自带独立滚动，左侧菜单始终固定在平板屏幕上，完全避开了你之前遇到的fixed/sticky冲突、固定高度适配差的问题。

• position: fixed在Ionic里容易和ion-content的内置滚动机制冲突，因为Ionic的组件有自己的阴影DOM层级，fixed定位可能会失效或者出现滚动异常
• 固定像素高度完全没有自适应能力，不同尺寸的平板屏幕高度差异很大，自然会出现显示问题

内容的提问来源于stack exchange，提问作者Ryan Coolwebs