解决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设置背景色踩坑,解决背景色全黑的问题及指定列添加背景色,自定义颜色 一.自定义颜色 二.背景色全黑(无效)的问题解决v9.4.1
- CSS3 深海游弋的鱼群
- 手把手教你创建群晖nas「共享文件夹」，从此告别 U 盘和低效传输
- 被final修饰的变量到底能不能被修改
- WinRAR安装、破解与去除弹窗广告（亲测有效）