-
Notifications
You must be signed in to change notification settings - Fork 6.6k
-
Notifications
You must be signed in to change notification settings - Fork 6.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug: 内容区域无法用flex布局来做自适应高度 #4377
Comments
这样会导致body滚动不符合预期,不同于v2版本,新版本不会去修改滚动条了,浏览器默认的滚动条已经符合用户使用习惯,且无需去对一些modal、backtop之类的组件做特殊处理,如果改为主体滚动,则还需要去考虑这些。我觉得要做的应该是浏览器默认滚动条带来的一些抖动优化 |
我的想法是能不能给Page控件一个开关,开关打开后,让page 或者page content的高度以具体px的方式 实现height 100% 这样 会好点. |
官方的Page组件,用CSS怎么弄也不行做不了自适应,因为父级元素的高是auto,而非100%,除非用JS去控制 |
老大,你理解错了 例如
<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>
<div>
<div class="h-[50px]">header</div>
<div>
我是一个正常的容器而以
<div class="h-[2000px]">我是超高内容</div>
</div>
</div> 另外我也不同意你说的用户习惯在
目前我的做法是: #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 |
你可以尝试看看,在不影响其他页面的情况下,有好的方式可以提PR。针对你要的这种场景,项目还有另一种方式,直接拿 var(--vben-content-height) 就可以了 |
用 var(--vben-content-height) ,会抖出两个滚动条的现象 |
我意思是自己写个算法 直接给page控件设置具体高度! 以具体px的方式 实现height 100% 这句话可能让你产生误会了 |
Version
Vben Admin V5
Describe the bug?
无法用flex布局来做自适应高度
解决方案:
BasicLayout
组件添加 class :h-full
VbenAdminLayout
组件中LayoutContent
组件加class:min-h-0
通常
flex:1 1 0%;
的元素上,最好是加上min-height:0
实际改这个文件就行了
Reproduction
System Info
Relevant log output
No response
Validations
The text was updated successfully, but these errors were encountered: