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

最新推荐文章于 2025-04-03 21:00:00 发布

吞石鱼

最新推荐文章于 2025-04-03 21:00:00 发布

阅读量8.1k

点赞数 2

文章标签： react less antd

本文链接：https://blog.youkuaiyun.com/qq_38735649/article/details/103610635

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目的: 当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;