fm453/nocobase
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2025-07-01 18:52:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(layout): adjust height calculation for mobile support using dvh unit (#6571)

Browse Source 
* fix(layout): adjust height calculation for mobile support using dvh unit

* feat: add createStyles import from antd-style for styling enhancements
This commit is contained in:
Zeke Zhang 2025-03-27 10:49:19 +08:00 committed by GitHub
parent d304ef4e0a
commit 9c6c612c4d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/core/client/src/route-switch/antd/admin-layout/index.tsx
View File

@ -52,7 +52,7 @@ import { KeepAlive } from './KeepAlive';
import { NocoBaseDesktopRoute, NocoBaseDesktopRouteType } from './convertRoutesToSchema';
import { MenuSchemaToolbar, ResetThemeTokenAndKeepAlgorithm } from './menuItemSettings';
import { userCenterSettings } from './userCenterSettings';
import { createGlobalStyle, createStyles } from 'antd-style';
import { createStyles } from 'antd-style';
export { KeepAlive, NocoBaseDesktopRouteType };
@ -155,10 +155,7 @@ const layoutContentClass = css`
display: flex;
flex-direction: column;
position: relative;
/* 基础高度（所有浏览器支持） */
height: calc(100vh - var(--nb-header-height));
/* 动态视口高度（现代浏览器支持） */
height: calc(100dvh - var(--nb-header-height));
> div {
position: relative;
}
@ -202,10 +199,29 @@ const pageContentStyle: React.CSSProperties = {
overflowY: 'auto',
};
// 移动端中需要使用 dvh 单位来计算高度，否则会出现滚动不到最底部的问题
const mobileHeight = {
height: `calc(100dvh - var(--nb-header-height))`,
};
function isDvhSupported() {
// 创建一个测试元素
const testEl = document.createElement('div');
// 尝试设置 dvh 单位
testEl.style.height = '1dvh';
// 如果浏览器支持 dvh，则会解析这个值
// 如果不支持，height 将保持为空字符串或被设置为无效值
return testEl.style.height === '1dvh';
}
export const LayoutContent = () => {
const style = useMemo(() => (isDvhSupported() ? mobileHeight : undefined), []);
/* Use the "nb-subpages-slot-without-header-and-side" class name to locate the position of the subpages */
return (
<div className={`${layoutContentClass} nb-subpages-slot-without-header-and-side`}>
<div className={`${layoutContentClass} nb-subpages-slot-without-header-and-side`} style={style}>
<div style={pageContentStyle}>
<Outlet />
</div>