如何在React中用display:flex使子div高度100%？

问题核心原因 #

你遇到的问题主要有两个关键诱因：

• React中错误使用了原生class属性（React组件需用className），导致col-12的Bootstrap网格样式未实际生效；
• Flex子元素自动拉伸的前提是父元素有明确高度，且没有其他样式覆盖默认的拉伸行为。

具体解决方案 #

1. 修正React类名属性

先把子div的class='col-12'改为className='col-12'，确保Bootstrap的网格样式正常应用到元素上。

2. 给父元素设置明确高度

如果希望子元素占满父元素高度，首先要让.dvPageNotFound拥有足够高度，比如让它占满整个浏览器视口：

• 可以直接用Bootstrap内置的h-100类，同时需要在全局样式里确保根容器的高度支撑：

html, body, #root {
  height: 100%;
  margin: 0;
}

3. 强制子元素拉伸高度

有两种可靠方式实现需求：

• 方式一：给父元素添加align-items-stretch类
  显式指定Flex容器的子元素沿交叉轴拉伸（这是Flex默认行为，但显式添加可避免被其他样式覆盖）：

import React from 'react';
import { Link } from 'react-router-dom';

const PageNotFound = () => {
  return (
    <>
      <div className="dvPageNotFound d-flex align-items-stretch h-100">
        <div className='col-12'>
          <h1 className="heading-lg">Page Not Found</h1>
          <p className="my-3">The page you are looking for we couldn't find.</p>
          <Link to="/" className="btn btn-black">
            Back to Homepage
          </Link>
        </div>
      </div>
    </>
  );
};

export default PageNotFound;

• 方式二：给子元素添加h-100类
  直接强制子元素高度为100%，适配父元素的高度设置：

import React from 'react';
import { Link } from 'react-router-dom';

const PageNotFound = () => {
  return (
    <>
      <div className="dvPageNotFound d-flex h-100">
        <div className='col-12 h-100'>
          <h1 className="heading-lg">Page Not Found</h1>
          <p className="my-3">The page you are looking for we couldn't find.</p>
          <Link to="/" className="btn btn-black">
            Back to Homepage
          </Link>
        </div>
      </div>
    </>
  );
};

export default PageNotFound;

额外排查建议 #

如果以上方法仍不生效，可通过浏览器开发者工具查看元素的计算样式，检查是否有自定义CSS覆盖了Flex布局或高度规则，针对性调整冲突样式即可。

内容的提问来源于stack exchange，提问作者me at stackoverflow