div设置width:100%,height:100%，background-color:red但是在页面上不显示

驾驾驾-哇

于 2021-03-23 10:23:26 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： javascript css html

本文链接：https://blog.youkuaiyun.com/m0_46404398/article/details/115110519

css 专栏收录该内容

1 篇文章

订阅专栏

在学习react并使用antd Layout组件时遇到一个问题，设置的div background-color:red, height:100%, width:100%在页面上未显示。经过排查，发现高度基于父级元素的百分比计算，而外层div root的height和width为默认的auto。解决方法是将root div的高度设置为100%。" 89852904,7942674,jmeter基础教程：安装与性能测试实践,"['自动化测试', '性能测试', 'jmeter']

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

最近在学习react，在使用antd的layout组件时，发现直接复制模板代码显示的效果和样例不一样：

function App() {
    return (
        <Layout>
            <Sider>Sider</Sider>
            <Layout>
                <Header>Header</Header>
                <Content>Content</Content>
                <Footer>Footer</Footer>
            </Layout>
        </Layout>
    );
}

页面显示效果不佳
然后设置Layout style height:100%

<Layout style={{height: '100%'}}>
    <Sider>Sider</Sider>
    <Layout>
        <Header>Header</Header>
        <Content>Content</Content>
        <Footer>Footer</Footer>
    </Layout>
</Layout>

页面显示依旧没变
然后自定义了一个div，设置background-color:red,height:100%,width:100%

function App() {
    return (
        <div style={{backgroundColor: 'red', height: '100%', width: '100%'}}>

        </div>
    );
}

但是页面显示一片空白，查看元素发现div height为0，很邪乎：

差点把我的前端梦扼杀在摇篮里。哈哈哈哈，最后查询w3c发现css中height %是基于父级元素占用的百分比：
查看代码结构，发现自定义div外层还包含一级div root,而root div 的height 和 width都为默认值：auto（自适应）。而自适应对象内内容有多少占用多少的高度，height就自适应内容所占高度。
%含义