结合antd layout做自适应的可见区高度

最新推荐文章于 2024-06-07 16:23:49 发布

原创最新推荐文章于 2024-06-07 16:23:49 发布 · 8.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#react #less #antd

本文旨在解决在React应用中，当内容组件高度不足一屏时，页面中间部分会塌陷的问题。通过设置minHeight并结合antd布局，确保内容区域在高度不足时自动占满一屏。通过计算header和footer等非内容区域（restHeight）的高度，并将min-height属性继承给内容区域的最外层div，实现了全页面自适应高度的效果。

目的: 当content组件高度不足一屏时，中间部分会塌陷，所以加minHeight让他不足一屏时自动占满一屏。
restHeight 是除了content的部分，比如header + footer的高度值。所以

minHeight: document.documentElement.clientHeight - restHeight

具体代码：

import React from 'react';
import { ConfigProvider, Layout } from 'antd';
import { PageBasicPropsModel } from '@/interfaces/common';
import zh_CN from 'antd/lib/locale/zh_CN';
import CustomFooter from './components/CustomFooter';
import CustomHeader from './components/CustomHeader';
import { restHeight } from '@/pages/constant';

const { Content } = Layout;
const BasicLayout: React.FC<PageBasicPropsModel> = props => {
  return (
    <ConfigProvider locale={zh_CN}>
      <Layout>
        <CustomHeader />
        <Content
          style={{
            background: 'white',
            minHeight: document.documentElement.clientHeight - restHeight,
          }}
        >
          {props.children}
        </Content>
        <CustomFooter />
      </Layout>
    </ConfigProvider>
  );
};

export default BasicLayout;