解决body高度设置为100%添加背景色不起作用
当给body添加以下样式时，按理说会显示出背景色且占据整个窗口，但实际却是背景色并无任何显示，检查时发现浏览器显示body的高度为0。
body {height: 100%;background-image: linear-gradient(to bottom right, #c165dd, #5c27f1);
}
原因在于：
（1）设置元素高度为百分比时，该元素需要向上遍历父标签，根据父元素的高度来设置自己的高度，若父元素高度也是百分比，则父元素也要找到自己的父元素，如果中间有个 height 为 auto 或是没有设置 height 属性，那么高度百分比就不起作用。
（2）上面的例子中 body 的父元素是 html，html 的父元素是浏览器，而浏览器本身是有宽度和高度的，所以设置 html 的 height: 100%，就可以获取浏览器的高了，这样一来，body 的背景色自然而然就可以显示了。
html {height: 100%;
}
body {height: 100%;background-image: linear-gradient(to bottom right, #c165dd, #5c27f1);
}
解决body高度设置为100%添加背景色不起作用相关推荐
- 微信小程序高度设置为100%
在网页中设置body,html{height:100%}; 将body和html设置为100%,这样我们就可以在他们的子元素中使用height:100%来使的我们的容器元素占满屏幕的高度啦. 但是在微 ...
- 解决div宽度设置width:100%后再设置padding或margin超出父元素的办法
前言: 有时候我们需要子div和父div一样宽(高),但是需要设置一定边距时,如果子元素使用width:100%在设置padding或margin的话,就会出现溢出问题. HTML <div c ...
- vue中设置height:100%无效的问题及解决方法
在vue.js中写新的components的时候,如果在新页面中的模板中设置height:100%的时候一直无效,在App.vue中:<template><div id=" ...
- div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
在设置了元素宽度width100%后再加上margin和padding超出父元素宽度,其实解决的方法很简单,直接使用CSS的 box-sizing 属性就可以解决这个问题,这个是CSS3新属性,可以将 ...
- html给div设置宽度无效,HTML学习之给div高度设置百分比不生效的问题
这几天在学习HTML的知识,今天想做一个极为简单的页面,就是分为头部,内容和底部,本来用三个div即可,可是给div高度设置百分比时发现不生效,具体页面如下,非常简单. 下面是html部分: 1111 ...
- APP里引用H5页面时，高度设置引起的底部白边等问题
H5页面在app里的常见问题: 1.当H5页面高度设置为100%,设置背景色时,发现高度有内容撑开,背景色没有铺满整个背景. 2.当H5页面高度设置为100vh,设置背景色时,背景设能铺满,但是上拉时 ...
- POI导出Excel设置背景色踩坑,解决背景色全黑(无效)的问题及指定列添加背景色,自定义颜色
POI导出Excel设置背景色踩坑,解决背景色全黑的问题及指定列添加背景色,自定义颜色 一.自定义颜色 二.背景色全黑(无效)的问题解决
- udp recvfrom阻塞吗_网络编程原理与UDP实现
- android RN开发环境搭建
- 在线摩尔斯密码加密解密工具
- 福昕PDF阅读器文本复制功能设置
- 交换机Trunk详解
- c语言通过编译器编译转换为机器码,assembler - TechTarget数据中心
- 【Vue】实现出生日期计算年龄
- fanuc机器人四边形编程_FANUC机器人编程与操作
- 铭soft理解图5.0
- 数字认证机构（CA）业务流程
- python hashlib库（MD5,sha1,sha256,sha512,pbkdf2_hmac）用法及pbkdf2原理
- js计时器实现页面刷新和幻灯片效果
- 用计算机绘制颗粒级配曲线,巧用excel绘制颗粒级配曲线与自动计算粒组特征参数...
- 20万粉丝的技术大V是怎样练成的--胡忠想访谈
- CRC(Cyclic Redundancy Check) 循环冗余校核