关于html,body{height:100%}的理解

最新推荐文章于 2024-05-22 10:58:50 发布
最新推荐文章于 2024-05-22 10:58:50 发布
阅读量4.8k 收藏 31
点赞数 11
分类专栏： css 文章标签： height:100%
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/suandfei/article/details/102766624
版权

有时候你看到别人写css代码的时候会发现:html,body{height:100%}
首先我们先看下w3c 对于height的定义 :
在这里插入图片描述
首先这个height:可能为百分数 就是相当于包含块的高度,如果为1个div没有设置宽度和高度呢. 不可否认的是,div会继承父元素的宽度100%,但是高度不会.如果div里面有文字就是内容撑开高度. 我们现在考虑的是div里面没有文字.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <style>
        div
最低0.47元/天 解锁文章
前端图形
关注
  • 11
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
HTML5+Canvas漂亮的3D烟花动画特效
06-11
HTML5是下一代网页标准，它的出现极大地扩展了网页开发的可能性，尤其是通过Canvas元素，开发者可以进行复杂的图形...通过深入理解并实践其中的代码，开发者可以提升自己的前端技能，创作出更多富有创意的网页应用。
aboutme:关于我的 HTML 页面
06-19
关于“aboutme:关于我的 HTML 页面”的创建，这个项目是一个个人简介页面，主要使用HTML语言构建，用于展示个人信息，包括进度条和社交图标等元素。HTML（HyperText Markup Language）是网页开发的基础，用于定义...
【转载】html和body
陌笙以笙箫
02-28 519
by zhangxinxu from http://www.zhangxinxu.com转载地址：http://www.zhangxinxu.com/wordpress/?p=259关于html与body的一些表现1.背景色一般情况下，我们css控制的最高节点就是body，例如设置：body{background:#069;}则浏览器界面就是完全的#068的背景色。这里看上去是&lt;body&g...
设置height:100%不生效的原因
最新发布
lbcbjtlhmjq的博客
05-22 329
之前网课案例总是不屑于去看，因为总觉得太花时间，但是不可否认的是，认真去看还是会有收获的，而且常有意外收获 昨天在看实现动画效果的综合案例中，意外解决了我长久以来的一个疑问：为什么给元素设置height:100%不生效？
html,body设置{height:100%}
零怀念的博客
09-29 4512
一般情况下，我们css控制的最高节点就是body，例如设置： body{background:#069;} 则浏览器界面就是完全的#068的背景色。这里看上去是<body>标签下的背景色起作用了，我到不这么认为，这里不是body的background起作用，而是body作为一个根节点起作用了，<html>标签未被激活，body担当类似于根节点的节点，其background背景色被浏览器俘获，浏览器界面背景色为background的背景色，以上是我的推论，这种推论不是我凭空想象出
html,body{height:100%}
ilipan的专栏
10-01 1208
html, body { height: 100%; } 解析：IE 处于标准模式时，body以html标签为高度参照，html标签才以窗口为参照，所以仅仅body 100%，并不能使它的子div100% 占据整个屏幕，还要使得 html 100%使得 html获得窗口大小才行。 body { height: 100%; } 解析：IE 处于混杂模式时，body以窗口
Javascript技巧之：body的height:100%高度，自适应窗口大小
quit1111的博客
11-29 1531
有的文章通过设置以下解决此问题，但改变了body的style.height会造成一些不必要的影响和麻烦，比如不必要的滚动条、超出body高度部分的显示问题等。经常需要设计一个全屏的html网页应用，但当你定义body直接子元素的高度为"100%"或通过以下代码设置元素高度时，确遗憾地发现body的高度并非当前窗口的可见高度。那么，有什么办法解决此问题呢？
html 最高高度,html的height:100%;高度是多少
weixin_42116650的博客
06-18 4066
html的height:100%;高度是多少html设置height:100%;表示一屏高度，类似于100vh。未设置则根据子元素的高度来自适应高。在实际应用中，设置页面高度为1屏幕高度通常设置：html,body{height:100%;margin:0;padding:0;}可以通过案例设置来查看html的实际高度。通过案例中改变窗口的高度大小，可以发现html的高度也是在变换的。html设置...
【html+css+js】小实例：日月交替效果
01-26
这个小项目可以帮助初学者更好地理解这三种技术的结合使用，以及如何通过动态改变元素的样式来创建交互式的网页特效。 首先，HTML（超文本标记语言）是网页的基础结构，用于定义页面的布局和内容。在这个实例中，...
myHtmlDemo:我HTML代码
04-24
HTML，全称HyperText Markup Language...通过查看和理解代码，你可以了解到如何构建基本的网页结构，如何引入外部资源，以及如何通过CSS来美化和定制网页的外观。如果你对网页开发感兴趣，这个项目将是一个不错的起点。
html左右布局示例代码
09-28
height: 100%; } .headbg { background: black; color: white; height: 48px; } .userManagerAll { height: 100%; width: 100%; } .leftside { background: #E6E6E6; float: left; height: 100%; width...
css中 html,body{height:100%;} 是什么意思
weixin_30794851的博客
05-01 349
<body>　　<div class="container">　　　　<div class="mainbg"></div>　　</div></body> /* CSS Document */body, html { height: 100%; }.container{ height:100%; }.mainbg{ backg...
HTML 中块级元素设置 height:100% 的实现
weixin_39818813的博客
03-31 587
现在你给了这个div的高度为100%，它有两个父元素&lt;body&gt;和&lt;html&gt;。为了让你的div的百分比高度能起作用，你必须设定&lt;body&gt;和&lt;html&gt;的高度 ！！！&lt;html style="height: 100%;"&gt;  &lt;body style="height: 100%;"&gt;    &l
如何让 height:100%; 起作用
u013681996的专栏
12-05 672
当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，这样的做法没有任何效果。你知道为什么height:100%不起作用吗？ 按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个div元素的CSS是height: 100px;，那它应该在页面的竖向
html,body设置高度100%后底部有空白的bug
weixin_34159110的博客
08-17 4743
html,body{ //... height:100% } #app{ //... } #footbar{ position:absolute;bottom:0px;left:0px;right:0px; } 问题：底部有空白，手指在body层滑动的时候，#app会被滑上去，露出底部小片空白。 原因：#app没有加position:relative； 结论：日了狗狗了。 ...
解决body高度设置为100%添加背景色不起作用
qq_44731369的博客
01-16 2745
当给body添加以下样式时，按理说会显示出背景色且占据整个窗口，但实际却是背景色并无任何显示，检查时发现浏览器显示body的高度为0。 body { height: 100%; background-image: linear-gradient(to bottom right, #c165dd, #5c27f1); } 原因在于： （1）设置元素高度为百分比时，该元素需要向上遍历父标签，根据父元素的高度来设置自己的高度，若父元素高度也是百分比，则父元素也要找到自己的父元素，如果中间有个
解决body设置height:100%无效问题
x1037490413的博客
10-31 2364
原因：你让div的height=“100%”，执行网页时，css先执行到，而整个网页中的内容还没有完全载入，是获取不到div外面的等的高度的，所以height="100%"也就不能如愿显示了。加上 body{height:100%} 就轻松解决啦，一开始就让body以100%显示，他的下级div自然就100%的，对于部分浏览器还需html,body{height:100%}height:100%;总结： 最好添加上 html,body{height:100%}
html中设置height=100%无效的问题
weixin_30633949的博客
06-14 318
设置height=100%（网页内容能够更好的适配各种屏幕大小） 第一种是设置某个单独的div元素 height=100%无效 原因很简单，所有基于本分比的尺寸必须基于父元素，而你如果没有设置父元素尺寸的大小就会失效，这里我们设置<body>height=100%,有时候这样设置也是无效的，因为body的父元素html没有设置，没有设置的尺寸默认为0 x 0 像素，所有一般加上...
HTML学习笔记.pdf
11-09
- 图像使用`<img>`标签，如`<img decoding="async" src="/images/logo.png" width="128" height="64">`，其中属性如`src`指定图片地址，`width`和`height`设置尺寸。 更深入地，文档介绍了HTML元素的构造规则： - ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值