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

elkon028 commented 2 months ago

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 commented 2 months ago

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

zhenjiang1986 commented 2 months ago

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

elkon028 commented 2 months ago

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

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

elkon028 commented 2 months ago

这样会导致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 上滚动

从布局逻辑上来讲，aside, header, main 是区域的象征，内容区域的溢出，就应该滚动内容区域
如果用户习惯在 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 commented 2 months ago

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

elkon028 commented 2 months ago

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

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

zhenjiang1986 commented 1 month ago

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

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

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

cbombonera commented 1 month ago

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

zhenjiang1986 commented 1 month ago

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

其实你可以考虑下我上面说的实现方式其实我已经实现了,不过我水平有限也没什么验证,自己写个 page-full.vue 看情况使用提醒你一下因为动画的存在,top和left也会变也要考虑.

cbombonera commented 1 month ago

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

其实你可以考虑下我上面说的实现方式其实我已经实现了,不过我水平有限也没什么验证,自己写个 page-full.vue 看情况使用提醒你一下因为动画的存在,top和left也会变也要考虑.

之前考虑过使用root 作者给的--vben-content-height 变量但是这个变量是可视区域高度，这个高度是包含底栏因为动态偏好，所以不想写死还有看你的评论，是用js吧，我个人是不想去动底层就是作者写的包，我只想在app下的ep和ant进行开发，因为我想着除了app，其他会随着作者更新而更新以前写jquery的时候，我就有点强迫证，铺满这种效果的，我就不是很想用js实现，想用纯用css处理我不是专业的前端，也没经历去调研太多，脑子里始终是觉得用传统的window.resize 或者现在的reszie挟持为了做自适应高度，计算出px 没有css性能佳，还有以前搞bootstrap框架做布局，用过js实现效果，动画效果感觉不佳，会在伸缩窗口高度的时候，因为动画过渡，会提前看到背景，看过一些作者也出现这种问题，所以传统思维想优先考虑css（并且我开发的场景用到铺满的模块不多，可能只会出现在系统管理系的用户左边是列表或者树右边表格这种场景），当然那都是很多年前的事了，我现在主要做后端也没关心前端，并且水平不行也是一部分。

cbombonera commented 1 month ago

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

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

因为有底栏吧底栏在可视区域的情况下实际就溢出了

cbombonera commented 1 month ago

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

其实你可以考虑下我上面说的实现方式其实我已经实现了,不过我水平有限也没什么验证,自己写个 page-full.vue 看情况使用提醒你一下因为动画的存在,top和left也会变也要考虑.

其实我也不是纠结铺满，我更钟爱类似禅道那种我很不喜欢页面铺满但是表格的话，有的不铺满，尤其对老年人效果不佳如果能类似禅道，滚动的时候，表格的列头和底部的分页栏一直具备粘附性，我觉得效果更好比如表格很高，滚动到下方列头看不到了，上方又看不到分页栏，看起来没啥但是我真的遇到很多客户就是说很麻烦，没办法之举就是铺满，表格内滚动

当然这种纯js打造的表格做这种粘性我觉得不难，只是底部计算稍微比头部计算复杂点但是我不是很会vue，这就变的非常难了

vbenjs / vue-vben-admin