body、html高度为零但有背景颜色

最新推荐文章于 2023-02-16 20:43:15 发布
原创 最新推荐文章于 2023-02-16 20:43:15 发布 · 686 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #前端 #css

浏览器在处理HTML文档时，body和html默认高度虽为0，但设置的背景颜色仍能显示。这是因为浏览器有一个默认的底板，会吸收并渲染这两个标签的背景色。当同时设置body和html的背景色，由于html更靠近浏览器，所以显示的是html的背景颜色。这一现象揭示了浏览器渲染页面时的层次逻辑。

1、在html 文档之中，body和html的默认高度为0，但是我们给body或者html设置背景颜色是会有对应的颜色显示的。这是为什么呢？

        其实这是浏览器的原因！

        浏览器相当于有个底板，吸收了给html或者body设置的背景颜色。

2、当给body 和html都设置背景颜色时，为什么显示的都是html的背景颜色？

        这是因为浏览器会吸收 body和html标签中更靠近自己的那个，并将颜色渲染到页面上，因为html想比于body更靠近浏览器，所以页面显示的是html的背景颜色。

Vue - 详细实现为每个页面单独设置 body 背景色，利用 JS 为每个页面单独修改背景色（独立修改单个页面的背景色，不同页面设置不同的背景颜色）
🏆 前端领域优质创作者
08-17 6953
Vue-每个页面单独设置body背景色（独立修改单个页面的背景色，不同页面设置不同的背景颜色），为不同页面设置body背景颜色，vue单独页面bodycss样式设置，vue.js每个页面page自定义body颜色，vue中怎么修改单个页面body的背景色，Vue中如何实现为单独页面设置背景色，Vue-cli中如何为单独页面设置背景色，如何改变vue单页面body的背景颜色，Vue不同页面body设置不同背景颜色，vue框架中单页面文件更改body,html页面背景颜色。.........
前端问题之body没设置高度背景色为什么会全屏显示？
xiaoxijinger的博客
04-09 277
还记得我们开发全屏页面或者是移动端页面时经常会设置一句话 是不是只知道用？却不知道怎么回事？ 原因是，当没有内容撑开高度时，html和body的默认高度是0，如果内容想要按照比例或是撑满全屏时，就没办法正常使用百分比。 而如果只设置body { height: 100%; }，这时body以html的高度为基准，但html默认高度也是0，所以需要设置html与body高度同与浏览器等高 但是，当我们没有设置任何高度的情况下，给body设置背景色，颜色竟然是可以布满浏览器的，然而可以看到控制台中，bod
html、body元素的高度问题
xingxingxingge的博客
03-14 1439
问题: 为什么要设置 html,body{height:100%} ? 首先看一段代码 <!DOCTYPE html> <html lang="en"> <head> <title>test</title> <style> * { margin: 0; ...
body设置height:100%，背景图的大小为contain，但是显示body高度为0，背景图不显示
Concise200的博客
03-09 1496
代码如下： * { margin: 0; padding: 0; } body{ height:100%; background: url(./images/product.jpeg) no-repeat center 0; /* 图片等比例缩放, 当宽度或高度和盒子尺寸相等, 图片就不再缩放 */ background-size: contain; /* 图片等比例缩放, 图片完全覆盖到整个盒子, 可能会导致图片显示不全 */
body高度为0为什么背景色能充满整个浏览器？
webpon
08-15 488
给body元素设置背景色，但是body没有内容，高度没有填充整个浏览器情况下，浏览器整个窗口都是body设置的背景色，这个是什么导致的？ 一般情况下，我们css控制的最高结点就是body，例如设置：body{background:#069;}则浏览器界面就是完全的#068的背景色。这里看上去是body标签下的背景色起作用了，我倒不这么认为。看下面的一段css代码： body{backg...
html宽度高度等于0,html中父div高度为0的原因
weixin_32004383的博客
06-21 630
问题：在chrome中看到父div高度为0，但里面明明有内容。原因：简单的讲原因就是子元素如果设了float属性，这些子元素就脱离了父div容器的控制，所以父容器认为里面没内容，高度自然变成了0.解决办法：1、在子div最后添加了个专门用户清除浮动的div，如2、在父div里添加样式：overflow:hidden;3、不要用浮动，子元素使用display:inline-table或者displa...
html5去掉图片背景颜色
07-11
// 如果当前像素点的R、G、B值与背景颜色相同（假设为白色） if (data[i] === 255 && data[i + 1] === 255 && data[i + 2] === 255) { // 设置该像素点为透明 data[i + 3] = 0; } } // 重新绘制处理后的图片...
div设置宽度背景颜色js代码.zip
07-05
// 修改背景颜色为蓝色 } </body> </html> ``` 在这个例子中，我们首先在HTML中创建了一个id为`myDiv`的div元素，并设置了一些初始的CSS样式。接着，我们编写了一个JavaScript函数`changeStyle()`，该函数会在...
js实现点击按钮后给Div图层设置随机背景颜色的方法
10-24
总结以上知识点，本文的示例通过HTML和JavaScript的配合使用，向读者展示了一个简单而实用的方法，即如何通过点击按钮来为页面中的div元素动态地设置随机背景颜色。通过这个过程，读者不仅可以学习到如何操作DOM来...
html高度为零,html中父div高度为0的原因
weixin_42193786的博客
06-22 926
问题：在chrome中看到父div高度为0，但里面明明有内容。原因：简单的讲原因就是子元素如果设了float属性，这些子元素就脱离了父div容器的控制，所以父容器认为里面没内容，高度自然变成了0.解决办法：1、在子div最后添加了个专门用户清除浮动的div，如2、在父div里添加样式：overflow:hidden;3、不要用浮动，子元素使用display:inline-table或者displa...
在html中，怎么获取当前页面body的高度，body是没有设置高度的，但是里面有内容...
weixin_33881140的博客
11-25 1917
为什么80%的码农都做不了架构师？>>> ...
div高度为0解决
halfsking的博客
10-14 9418
         div高度是根据里面内容自适应撑开的，如果没有内容高度则为0；但div里面有内容高度仍是0，多半是因为元素浮动引起，div里面的元素浮动到其它地方，div里实际上没有内容，因而为0；         用如下为例：  &lt;div&gt; &lt;a&gt; &lt;img&gt;&lt;/img&gt;&lt;/a&gt; &lt;/div&gt;      ...
document.body.scrollTop为0的解决方案
技术天地
08-03 1万+
<br />Jquery用多了，对单纯JS却发现有些问题。今天做浮动就碰上了document.body.scrollTop总为0的问题。百度一下终于得到解决方法。<br />在页面中加一个随着页面滚动条滚动的小图片广告，但是却发现document.body.scrollTop这个属性在本地的时候能取到值，但是传到服务器上的时候取到的值一直不变。<br />解决方案<br />1、原来在HTML文件头部声明了这样一句：<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
body没有高度设置背景色为什么可以全屏显示？
关注我！带你一路 "狂飙" 到底！
01-06 701
当我们没有设置任何高度的情况下，给body设置背景色，颜色竟然是可以布满浏览器的，然而可以看到控制台中，body实实在在是没有高度的，这究竟是为什么呢？而在我看来，实际是我们设置的body背景色[生效了]，但因body默认高度为0，所以在页面中并没有粉色区块显示，那我们尝试在body中添加一些内容。这怎么和预想不一样，再放大页面看一下渐变，就可以发现每个渐变的高度和html的高度是一致的，而html的高度则是body的默认margin撑开。】赋上了颜色，可以理解为，body的背景色被浏浏览器”吃掉“
由html,body{height:100%}引发的对html和body的思考
热门推荐
javaloveiphone的专栏
04-08 3万+
一、html,body{height:100%}今天看到一个CSS样式：html,body{height:100%}，第一次看到，感觉挺奇怪，为什么html还需要设置height:100%呢，html不就是整个窗口吗？我是这样认为的。然后就把html去掉只剩下body的height:100%，麻烦了，页面内容消失了(页面里只有一个空div通过百分比设置height)。html代码：<body> <d
HTML Table保持固定高度
編程筆記
03-01 2万+
table{width:100%;border:1px solid #999;} table td{word-break: keep-all;white-space:nowrap;}
body使用渐变色无效的原因之一：html没有设置高度
qq_43114230的博客
02-16 1493
解决网页中body设置了背景，且背景为渐变色但是无效的问题。
这样子不行，只有背景颜色高度为页面的一半
最新发布
12-19
要实现背景颜色高度占据页面一半，可使用不同的方法。 ### 使用视口单位 `vh` 使用 `vh` 单位可以很方便地设置元素高度为视口高度的一定比例，1vh 等于视口高度的 1％，设置为 50vh 即页面高度的一半[^3]。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { margin: 0; } .half-height-bg { height: 50vh; background-color: lightblue; } </style> </head> <body> <div class="half-height-bg"></div> </body> </html> ``` ### 设置 `html` 和 `body` 高度 先将 `html` 和 `body` 的高度设置为 100%，再给目标元素设置 50% 的高度[^5]。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> html, body { height: 100%; margin: 0; } .half-height-bg { height: 50%; background-color: lightgreen; } </style> </head> <body> <div class="half-height-bg"></div> </body> </html> ``` ### 现有设置无效的原因及解决办法 如果设置无效，可能是因为父元素高度未正确设置。例如，当给子元素设置百分比高度时，其父元素需要有明确的高度值。若父元素高度为 0，子元素的百分比高度设置将无效。此时可以通过设置父元素高度为 100% 或使用 `vh` 单位来解决。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值