Bug: 内容区域无法用flex布局来做自适应高度

[elkon028]

Version

Vben Admin V5

Describe the bug?

无法用flex布局来做自适应高度

解决方案：

• BasicLayout 组件添加 class : h-full
• VbenAdminLayout组件中

  <!-- contentRef 元素添加 class: `h-full` -->
  <div
      ref="contentRef"
      class="flex flex-1 flex-col overflow-hidden transition-all duration-300 ease-in h-full"
  >

  • LayoutContent 组件加class: min-h-0

通常flex:1 1 0%;的元素上，最好是加上min-height:0

实际改这个文件就行了

• packages/@core/ui-kit/layout-ui/src/vben-layout.vue

• <LayoutContent ... class="...">

• <LayoutContent ... class="... min-h-0" >

Reproduction

• src/views/demo.vue

  <template>
  <div class="flex h-full flex-col">
  <div class="h-[50px]">header</div>
  <div aria-label="scroll element" class="min-h-0 flex-1 overflow-y-auto">
    <div class="h-[2000px]" aria-label="content element">content</div>
  </div>
  </div>
  </template>

System Info

System:
    OS: macOS 14.6.1
    CPU: (14) arm64 Apple M3 Max
    Memory: 378.88 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.16.0 - /usr/local/bin/node
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 9.10.0 - /usr/local/bin/pnpm
    Watchman: 2024.09.02.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 128.0.6613.137
    Safari: 17.6

Relevant log output

No response

Validations

• [X] Read the docs
• [X] Ensure the code is up to date. (Some issues have been fixed in the latest version)
• [X] I have searched the existing issues and checked that my issue does not duplicate any existing issues.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[anncwb]

这样会导致body滚动不符合预期，不同于v2版本，新版本不会去修改滚动条了，浏览器默认的滚动条已经符合用户使用习惯，且无需去对一些modal、backtop之类的组件做特殊处理，如果改为主体滚动，则还需要去考虑这些。我觉得要做的应该是浏览器默认滚动条带来的一些抖动优化

[zhenjiang1986]

我的想法是能不能给Page控件一个开关,开关打开后,让page 或者page content的高度以具体px的方式 实现height 100% 这样 会好点.

[elkon028]

我的想法是能不能给Page控件一个开关,开关打开后,让page 或者page content的高度以具体px的方式 实现height 100% 这样 会好点.

官方的Page组件，用CSS怎么弄也不行做不了自适应，因为父级元素的高是auto，而非100%，除非用JS去控制

[elkon028]

这样会导致body滚动不符合预期，不同于v2版本，新版本不会去修改滚动条了，浏览器默认的滚动条已经符合用户使用习惯，且无需去对一些modal、backtop之类的组件做特殊处理，如果改为主体滚动，则还需要去考虑这些。我觉得要做的应该是浏览器默认滚动条带来的一些抖动优化

老大，你理解错了 这个问题只是让内容区域的所有父级有高度(100%) 这样的话，用户的内容区域就可以用 flex 布局来做自适应高

例如

• 用户内容区域(flex布局)：滚动条在 div.scroll 上

  <div class="flex flex-col">
  <div class="h-[50px]">header</div>
  <div class="flex-1 overflow-y-auto scroll">
  我是scroll自适应高度容器
  <div class="h-[2000px]">我是超高内容</div>
  </div>
  </div>

• 用户内容区域(非flex布局): 流动条在 Document 上

  <div>
  <div class="h-[50px]">header</div>
  <div>
  我是一个正常的容器而以
  <div class="h-[2000px]">我是超高内容</div>
  </div>
  </div>

另外

我也不同意你说的用户习惯在 Document 上滚动

1. 从布局逻辑上来讲，aside, header, main 是区域的象征，内容区域的溢出，就应该滚动内容区域
2. 如果用户习惯在 Document 上滚动，那为什么 vben 又要 固定 aside和header呢，我想，这个固定它们是从逻辑功能上的需要，但这是不是违背了你说的用户习惯呢?

目前我的做法是：　

#app {
  /** fix: vben flex layout css bug **/
  > div:first-child {
    height: 100%;

    > aside + div {
      height: 100%;

      > main {
        min-height: 0;
        overflow-y: auto;
      }
    }
  }
}

这样的话，滚动条是在内容区域，但会丢失vben的backtop 问题不大，可以自己在内容区域自己做个useResizeObserver 至于你说的 model、dialog 之类的，我从来没碰到任何问题，我用的组件库是Element-ui、 Element-plus

[vince292007]

你可以尝试看看，在不影响其他页面的情况下，有好的方式可以提PR。针对你要的这种场景，项目还有另一种方式，直接拿 var(--vben-content-height) 就可以了

[elkon028]

你可以尝试看看，在不影响其他页面的情况下，有好的方式可以提PR。针对你要的这种场景，项目还有另一种方式，直接拿 var(--vben-content-height) 就可以了

用 var(--vben-content-height) ，会抖出两个滚动条的现象

[zhenjiang1986]

我的想法是能不能给Page控件一个开关,开关打开后,让page 或者page content的高度以具体px的方式 实现height 100% 这样 会好点.

官方的Page组件，用CSS怎么弄也不行做不了自适应，因为父级元素的高是auto，而非100%，除非用JS去控制

我意思是自己写个算法 直接给page控件设置具体高度! 以具体px的方式 实现height 100% 这句话可能让你产生误会了

[catalpaUI]

想问下，如果main下面 ，就是page 下面 自己做的div 用absolute，合理吗 对css不是很了解，但是我有个需求就是 main下面 就是查询和表格 然后表格自适应高度 滚动条 调了一会css 发现main flex:1 1 0% 会导致 子级的div flex:1什么都失效 实在找不到什么好的方案 也不想用js去计算可视区域高度 最后发现main下面自己建的div 设置absolute 宽度百分百 高度百分百 好像是可以满足这个div铺满 自适应的 但是对css由于不是很了解，也很少看别人这么搞，不知道怎么搞可行否