html,body{ width: 100%;height: 100%;}的解释

最新推荐文章于 2024-06-06 12:18:39 发布
最新推荐文章于 2024-06-06 12:18:39 发布
阅读量1.1w 收藏 9
点赞数 4
分类专栏： CSS属性 文章标签： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26239917/article/details/88543304
版权

按道理，子元素百分比是以父元素为标准，那么问题来了，html有父元素吗？

html{ width: 100%;height: 100%;}拿谁的宽高？

经过测试，是当前浏览器窗口的大小

看图

<body>
		<div "func()">xxx</div>
	</body>
	<script>
		function func(){
			var div = document.getElementsByTagName("div")[0];
			alert(parseInt(getStyle(div,"width"))+"--"+parseInt(getStyle(div,"height")));
		}
		function getStyle(ele,attr){
				if(window.getComputedStyle){
					return getComputedStyle(ele,null)[attr];
				} 
				else{
					return ele.currentStyle[attr];
				}
		} 		
	</script>

在这里插入图片描述

全屏幕下，是1506-686

缩放下

在这里插入图片描述

其实可以写成

	    html{ width: 100%;height: 100%}
		body{height:100%}
		div{
			height: 100%;/* 再次证明高度不能继承 */
			background-color: salmon;
		}

宽度100%不用写，可以继承，但是如果不写height,就会得不到可视区域的高度

Fade Away
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css width 100% 火狐,“height: 100%”在Firefox浏览器中的问题
weixin_39759107的博客
08-04 857
如果是二栏式分布的页面，一边内容比较长的时候在浏览时，在IE浏览器中浏览正常，但在Firefox中浏览时，左右二边不能对齐：IE浏览器中浏览正常，左右对齐：Firefox中浏览时，左边内容长右边就短：Firefox中浏览时，底部就对不齐：先查一下CSS中的定义：中部内容的CSS定义：#mainall {width: 760px;height: 100%;padding: 0px !importan...
关于html,body{height:100%}的理解
suandfei的博客
10-27 4817
有时候你看到别人写css代码的时候会发现:html,body{height:100%} 首先我们先看下w3c 对于height的定义 : 首先这个height:可能为百分数 就是相当于包含块的高度,如果为1个div没有设置宽度和高度呢. 不可否认的是,div会继承父元素的宽度100%,但是高度不会.如果div里面有文字就是内容撑开高度. 我们现在考虑的是div里面没有文字. <!DOCTY...
HTML5 body设置自适应全屏
11-21
用什么代码实现？不允许有白色底色产生，因为手机高度不一样 设计图要标准（750）确认是背景图（通屏底图）应用场景：移动端宣传页面或者活动页面 错误的写法：加到div中结合图片设置min-height，但是页面不会回弹 终极方案 html,body{ width:100%; height:100% } body{ font-family: "华文细黑"; background:url("../img/Flyer-bg.png") no-repeat; background-size: 100%; } 一个hack方案解决垂直剧中问题 <head> <meta ch
html width 和 height属性详解
最新发布
2302_79483741的博客
06-06 563
在HTML中，width和height属性主要用于元素以及和等元素，以指定元素的宽度和高度。这些属性定义了元素在页面上的显示尺寸。
在el-tabs中echarts图表宽高设置style=“width: 100%； height: 100%“不起效变成100px的问题
鹤渺的星球
12-22 1924
最粗暴的解决办法是给div一个固定的高度，也就是上面三种解决方案的核心，比如你遇到问题时候实时给div一个高宽恒定值，然后看看画出的图尺寸变没有，再去考虑是样式冲突或者组件渲染的问题导致这种情况。
html height 100%无效,前端小知识--为什么你写的height:100%不起作用？
weixin_39675679的博客
06-03 572
为什么你写的height:100%不起作用？这个知识不算冷门的，但是用的时候可能还是会有些懵逼，不能生效时搜一搜就能找到答案了，但是你真的懂了吗？为什么想要设置一个全屏元素的时候，高度不受%的控制？1.百分比宽高的设定2.width:100%;我们写下这样一段代码，随意设置一个背景色便于观察元素width:100%;height:100%;//宽100%，我们现在看到的高是属于font-size的...
div设置width:100%,height:100%，background-color:red但是在页面上不显示
m0_46404398的博客
03-23 1515
最近在学习react，在使用antd的layout组件时，发现直接复制模板代码显示的效果和样例不一样： function App() { return ( <Layout> <Sider>Sider</Sider> <Layout> <Header>Header</Header> <Content
CSS中图片宽度100%时如何根据图片宽度设置成比例的高度
beyond520lin的博客
07-04 835
【代码】CSS中图片宽度100%时如何根据图片宽度设置成比例的高度。
div高度、宽度100%|div width、height 100% - div100%
xbbccx的专栏
02-26 1441
正像你所知道的那样，设置DIV大小的有两个属性width和height，以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑，不明确这个100%的宽度（高度）到底有多宽有多高？这个100%是从哪里得到的从哪里继承的？今天我们的话题就是有关div高度100%的问题！ 其实，要弄懂div宽度|width100%、div高度|height100%到底是怎么实现的，只需弄懂一个简单的问题就可以了
设置height:100%无效的原因以及两种解决方法
热门推荐
小多的博客
01-04 2万+
原因：我们知道在把盒子宽度自适应为浏览器窗口宽度，只需设置width:100%就可轻松解决问题，但是让盒子的高度自适应浏览窗口的高度并非那么容易，这是因为css内部计算的原因 <!-- 高度实际为字体大小 --> <div class="box" style="width:100%;height:100%;background-color:red;"> width:100%;height:100%; </div> 解决方法一：设置父元素高度 html, bod
【小技巧】如何让body中的一个div占全屏
iuukai
01-05 2167
想要令body里一个块元素（div）占全屏，相信很多人（包括我）都会直接把body设置宽高100%，但实际却是，行不通： 原因：因为body跟div一样是块元素，直接赋值给块元素height:100%，相当于就是默认值的独占一行。所以这里写body{ width:100%; height:100%;}，其实是毫无作用的。但是又不希望给body设置固定的大值宽高，怎么办？ 第一种方法：给di...
CSS设置盒子容器(div)高度(height)始终为100%
11-19
为了实现这一点，不仅`div`本身需要设置`height: 100%`，而且它的所有上级元素（如`body`和`html`）也需要设定一个有效的高度值。通常，这意味着将`html`和`body`的高度都设置为100%，因为他们是页面的根元素，且...
HTML5+Canvas漂亮的3D烟花动画特效
06-11
HTML5是下一代网页标准，它的出现极大地扩展了网页开发的可能性，尤其是通过Canvas元素，开发者可以进行复杂的图形绘制和动画设计。这款"HTML5+Canvas漂亮的3D烟花动画特效"就是一个很好的例子，它展示了HTML5的强大...
HTML表格标记教程(3):宽度和高度属性WIDTH、HEIGHT
12-01
<table border=1 width="400" height="100"> 网页图像软件</td><td>Fireworks 网页制作软件</td><td>Dreamweaver 网页动画软件</td><td>Flash </body> </html> ``` 在这个例子中，表格的宽度被...
js获取height和width的方法说明
10-27
在JavaScript中，获取元素的高度（height）和宽度（width）是网页动态布局和交互的关键部分。以下是一些常用的方法来获取这些属性值： 1. **jQuery 方法**： - `$(window).height()`：返回浏览器当前窗口可视区域...
web排版——实现：body全屏（width:100%;height:100%），分left与right两栏，left宽度为固定值（如200px），right宽度为全屏剩下的宽度...
dlxn38744的博客
11-04 215
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><met...
html设置页面大小始终100%,css width 100% 宽度百分之百设置与不设置
weixin_39896256的博客
06-03 1万+
css宽度百分之百设置与不设置css width可以设置具体固定数值比如10px、500px、980px、1200px等，以达到网页固定宽度显示。css 宽度 width也可以设置百分比值，比如80%、90%、100%等。这里为大家介绍100%宽度知识，究竟100% width宽度究竟是多宽？一、随浏览器分辨率宽度而改变100% width如果是最外层DIV布局设置css宽度100%(width:...
在HTML中width:100%了，在设置border,这时盒子的总宽度会大于父盒子，会溢出，这时该怎么办？
小董同学西北民族
10-16 1232
题目 width:100%了，在设置border,这时盒子的总宽度会大于父盒子，会溢出，这时该怎么办？ 分析 因为传统的代码： .box3{ width: 50%; height: 50%; background-color: aqua; border: 1px solid black; float: left; } 会导致溢出，所以这时我们加上代码：box-sizing: border-box; 原本代码变为： .box2{ width: 50%; height: 50%; background-colo
html div高度 满屏幕,div百分百占满屏幕的两种css写法
weixin_39538789的博客
06-15 3781
很多人都知道，div容器在一般情况下即使设置高为100%也不会真的占满屏幕(浏览器窗口高度)，那么究竟有没有办法用样式实现100%屏高呢？答案是肯定的。今天益吾库就来分享一下div百分百占满屏幕的两种css写法，一种是绝对定位方法，另一种是根容器百分比方法，具体实例代码如下：绝对定位方法：*{padding:0;margin:0;}#myDiv{width:100%;height:100...
body { width: 100%; height: 100%;}什么意思
06-09
这段CSS代码用于设置 `body` 元素的宽度和高度为页面可见区域的100%。具体来说，`width: 100%;` 表示将 `body` 元素的宽度设置为与页面可见区域一样宽，而 `height: 100%;` 则表示将 `body` 元素的高度设置为与页面可见区域一样高。这样设置后，`body` 元素将占据整个页面可见区域的大小，以确保页面布局和显示的一致性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值