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

最新推荐文章于 2023-04-09 17:48:03 发布
最新推荐文章于 2023-04-09 17:48:03 发布
阅读量1.5k 收藏
点赞数
分类专栏： css 文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46404398/article/details/115110519
版权
在学习react并使用antd Layout组件时遇到一个问题，设置的div background-color:red, height:100%, width:100%在页面上未显示。经过排查，发现高度基于父级元素的百分比计算，而外层div root的height和width为默认的auto。解决方法是将root div的高度设置为100%。" 89852904,7942674,jmeter基础教程：安装与性能测试实践,"['自动化测试', '性能测试', 'jmeter']
摘要由CSDN通过智能技术生成

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

function App() {
   
    return (
        <Layout>
            <Sider>Sider</Sider>
            <Layout>
                <Header>Header<
最低0.47元/天 解锁文章
驾驾驾-哇
关注
专栏目录
CSS样式之width: auto 100%与height:100%
GeXueliu的博客
04-07 905
1.Width（默认情况下为content box的宽度） width:auto 元素content+padding+border+margin=父元素的width <style> .parent { height: 400px; width: 400px; border: 1px solid black; padding: 10px 10px; }
css width 100% 火狐,“height: 100%”在Firefox浏览器中的问题
weixin_39759107的博客
08-04 893
如果是二栏式分布的页面，一边内容比较长的时候在浏览时，在IE浏览器中浏览正常，但在Firefox中浏览时，左右二边不能对齐：IE浏览器中浏览正常，左右对齐：Firefox中浏览时，左边内容长右边就短：Firefox中浏览时，底部就对不齐：先查一下CSS中的定义：中部内容的CSS定义：#mainall {width: 760px;height: 100%;padding: 0px !importan...
div高度、宽度100%|div width、height 100% - div100%
xbbccx的专栏
02-26 1453
正像你所知道的那样，设置DIV大小的有两个属性width和height，以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑，不明确这个100%的宽度（高度）到底有多宽有多高？这个100%是从哪里得到的从哪里继承的？今天我们的话题就是有关div高度100%的问题！ 其实，要弄懂div宽度|width100%、div高度|height100%到底是怎么实现的，只需弄懂一个简单的问题就可以了
前端小知识--为什么你写的height:100%不起作用？
weixin_34092370的博客
01-04 680
为什么你写的height:100%不起作用？ 这个知识不算冷门的，但是用的时候可能还是会有些懵逼，不能生效时搜一搜就能找到答案了，但是你真的懂了吗？为什么想要设置一个全屏元素的时候，高度不受%的控制？ 1.百分比宽高的设定 按照w3c中的width和height属性，可以明确%设定宽高是根据父元素的宽高来的：http://www.w3sc...
设置整个页面的背景颜色，解决height:100%不起作用问题
weixin_30512043的博客
05-28 1821
body{ 　　width:100%;　　 　　height:100%; 　　background-color:#f00; } 从以上代码可以看出 body 的背景颜色并没有想我们想的那样铺满整个背景； 解决方法：也要设置父元素的高度，即可 html，body{ 　　width:100%;　　 　　height:100%; 　　background-color:#f0...
html,body{ width: 100%;height: 100%;}的解释
热门推荐
qq_26239917的博客
03-13 1万+
按道理，子元素百分比是以父元素为标准，那么问题来了，html有父元素吗？ html{ width: 100%;height: 100%;}拿谁的宽高？ 经过测试，是当前浏览器窗口的大小 看图 &amp;lt;body&amp;gt; &amp;lt;div onclick=&quot;func()&quot;&amp;gt;xxx&amp;lt;/div&amp;gt; &amp;lt;/body&amp;gt
width: auto和width: 100%、height: auto和height: 100%的区别
weixin_44784401的博客
04-09 2307
标准盒模型和怪异盒模型的区别，width: auto和width: 100%、height: auto和height: 100%的区别
CSS13_由html{height: 100%} 引发的CSS百分比宽高度的思考
linxwx的博客
11-20 1335
html {height: 100%}，其高度是浏览器给的
CSS设置盒子容器(div)高度(height)始终为100%
11-19
然而，直接在CSS中为一个元素（如`div`）设置`height: 100%`并不总是有效，因为这涉及到CSS布局中的层次关系和百分比高度的计算规则。这个问题在描述中已经有所提及，现在我们将深入探讨这个问题，并提供解决方案。 ...
html页面100%高度,高度100%页面自适应布局详解 - 文章教程
weixin_35902426的博客
06-04 2527
有时候可能我们会遇到这样的设计，内容需要在浏览器一屏范围内显示，而不会出现滚动滚动条查看内容的情况，如一些富Web应用，让你感觉更像在操作一个程序甚至是窗口界面系统。追述过去，聊天室这类的Web应用就是如此，而往往我们会首先考虑框架元素(Frame)嵌入不同的 HTML 页面实现，特别是早期的类似 Ajax 应用就会用到框架这个古老的元素但很显然，追求页面标准化和 Web 设计现代化的结构设计师不...
CSS难点 为什么height设置100%会失效，分栏目等高布局(高度自适用布局)的实现方案...
04-23 1060
前言 相信在平时写CSS的时候大家都或多或少遇见过设置了height为百分比的时候发现不起作用。今天我们就来一探究竟 原因：父元素未设置具体高度，子元素设置height:100%是无效的。 现象以及方案 [1] 设置高度为100%时，无法实现全屏 <!DOCTYPE html> <html lang="en"> <head> <meta ...
关于div宽度和高度的100%设定的问题
weixin_45806273的博客
11-23 2814
设置DIV大小的有两个属性width和height，以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑，不明白这个100%的宽度（高度）到底有多宽有多高？这个100%是从哪里得到的从哪里继承的？今天我们的话题就是有关div高度100%的问题！ 其实，要弄懂div宽度|width100%、div高度|height100%到底是怎么实现的，只需弄懂一个简单的问题就可以了，即100%的基数...
设置div高度为100%
wr_mroo的博客
09-02 3236
直接使用如下代码设置div的宽度和高度时，div宽度会铺满屏幕，而高度为零。<div style="width:100%;height:100%"></div>原因：浏览器会直接计算窗口的宽度，作为容器宽度的缺省值。但是并不会计算窗口的高度，只是简单的向下堆砌。解决方法： 1.为该元素的所有父元素设置宽度为100%。<html style="height: 100%;padding: 0;marg
加了宽高百分比设置了背景没有显示？
yuyuyuyuyuyyuuyu的博客
03-01 131
加了宽高百分比设置了背景没有显示？
css背景颜色不显示
m0_64544033的博客
02-15 1628
css背景颜色不显示
div background 不显示
Pipi0714的专栏
05-04 6056
div background 不显示
在一个大的div里div和el-table宽度都为100%为何边框对不齐
guapilixianghe的博客
06-08 288
如题，如何让div和el-table的边框对齐呢 这样就能让带边框的div和el-table对齐了
div高度100%,div宽度100%
09-03 599
正像你所知道的那样，设置DIV大小的有两个属性width和height，以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑，不明 确这个100%的宽度（高度）到底有多宽有多高？这个100%是从哪里得到的从哪里继承的？今天我们的话题就是有关div高度100%的问题！ 其实，要弄懂div宽度|width100%、div高度|height100%到底是怎么实现的，只需弄懂一个简单的...
三个子盒子会重叠怎么处理，<template> <div class="mmz-content"> <div class="top"> </div> <div class="middle"> </div> <div class="bottom"> </div> </div> </template> <style lang="scss" scoped> .mmz-content { position: relative; .top { position: absolute; height: 20%; width: 100%; background-color: red; } .middle { position: absolute; height: 40%; width: 100%; background-color: lawngreen; } .top { position: absolute; height: 40%; width: 100%; background-color: dark; } } </style>
最新发布
05-28
在这个例子中，由于三个子盒子的定位都是绝对定位，所以它们会重叠在一起。为了解决这个问题，可以给每个子盒子设置不同的 z-index 属性，使其在 z 轴上产生分层效果。具体地，可以将顶部子盒子的 z-index 设置为 3，中间子盒子的 z-index 设置为 2，底部子盒子的 z-index 设置为 1，如下所示： ``` <template> <div class="mmz-content"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> </template> <style lang="scss" scoped> .mmz-content { position: relative; .top { position: absolute; height: 20%; width: 100%; background-color: red; z-index: 3; } .middle { position: absolute; height: 40%; width: 100%; background-color: lawngreen; z-index: 2; } .bottom { position: absolute; height: 40%; width: 100%; background-color: dark; z-index: 1; } } </style> ``` 这样做可以保证每个子盒子都处于不同的图层，从而避免它们重叠在一起。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值