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

最新推荐文章于 2023-07-04 15:23:14 发布
最新推荐文章于 2023-07-04 15:23:14 发布
阅读量1.2w 收藏 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,就会得不到可视区域的高度

7个场景让你深入理解min max - width height
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
09-24 1万+
theme: channing-cyan 这是我参与8月更文挑战的第30天，活动详情查看：8月更文挑战 创作不易，点个赞再看呗! 关注专栏 - 学透CSS，让你走进CSS世界的深处 前言 日常开发的时候，大家有么有遇到下面这种情况：设置一个盒子，但是我们不知道有没有内容，并且有多少内容我们也不能确定，而且又不想出现滚动条，这个时候我们就不能设置具体高度，但是我们可以设置min-height来用最小的高度撑开盒子，并且随着内容的多少，盒子的高度可以动态调整，这样是不是就满足了我们的要求。min/ma.
网页设计-动态爱心
lxy20011125的博客
05-23 3355
代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>动态爱心</title> <style> html, body { height: 100%; padding: 0; margin: 0; background: #000; overflow:hidden; } canvas { position: absolute;
css width 100% 火狐,“height: 100%”在Firefox浏览器中的问题
weixin_39759107的博客
08-04 977
如果是二栏式分布的页面，一边内容比较长的时候在浏览时，在IE浏览器中浏览正常，但在Firefox中浏览时，左右二边不能对齐：IE浏览器中浏览正常，左右对齐：Firefox中浏览时，左边内容长右边就短：Firefox中浏览时，底部就对不齐：先查一下CSS中的定义：中部内容的CSS定义：#mainall {width: 760px;height: 100%;padding: 0px !importan...
div高度、宽度100%|div width、height 100% - div100%
xbbccx的专栏
02-26 1521
正像你所知道的那样，设置DIV大小的有两个属性width和height，以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑，不明确这个100%的宽度（高度）到底有多宽有多高？这个100%是从哪里得到的从哪里继承的？今天我们的话题就是有关div高度100%的问题！ 其实，要弄懂div宽度|width100%、div高度|height100%到底是怎么实现的，只需弄懂一个简单的问题就可以了
width: auto和width: 100%、height: auto和height: 100%的区别
weixin_44784401的博客
04-09 2654
标准盒模型和怪异盒模型的区别，width: auto和width: 100%、height: auto和height: 100%的区别
CSS样式之width: auto 100%与height:100%
GeXueliu的博客
04-07 1019
1.Width（默认情况下为content box的宽度） width:auto 元素content+padding+border+margin=父元素的width <style> .parent { height: 400px; width: 400px; border: 1px solid black; padding: 10px 10px; }
html代码width什么意思,width：100% 啥意思呢，在什么情况下使用？
weixin_31464715的博客
06-09 6464
width：100% 啥意思呢，在什么情况下使用？很少用到这个，不怎么了解。。有例子可以参考下么？作者: kangyuan发布时间: 2009-10-16至少做规则覆盖的时候会用到吧作者: ivershuo发布时间: 2009-10-16嗯，有时候用它来触发ie的haslayout。元素设置position:absolute之后，也可能会用。作者: ONEBOYS发布时间: 2009-10-16默...
关于html,body{height:100%}的理解
suandfei的博客
10-27 4998
有时候你看到别人写css代码的时候会发现:html,body{height:100%} 首先我们先看下w3c 对于height的定义 : 首先这个height:可能为百分数 就是相当于包含块的高度,如果为1个div没有设置宽度和高度呢. 不可否认的是,div会继承父元素的宽度100%,但是高度不会.如果div里面有文字就是内容撑开高度. 我们现在考虑的是div里面没有文字. <!DOCTY...
vue设置height:100%无效
子时不睡的博客
07-30 3209
使用vue来创建一个地图样式的组件，在地图组件页面设置了样式，却没有生效 <style> #viewDiv { width: 100%; height: 100%; } </style> 只有上面一部分 height设置成100%，组件中的div的高度应该和父元素也就是App.vue中的div一样，而App.vue中的div父结点是body标签，body标签上一级是html标签，body和html的高度默认是auto，浏览器也不会自动加高度，所以b
页面的百分比布局
qq_35315439的博客
08-15 4874
写一个产业图谱的页面已经很久，却从没有进行复盘过。自己细细一想，自己写的页面，对它总体的把控却没有。感觉一个页面是在修修补补中完成的。所以特定总结一个百分比的页面布局。 知识点： 基本的Html页面构成： //<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。 <!doctype html> <html> <head> <meta charset="utf-8">
让页面元素适应电脑屏幕大小设置width:100% height:100%
q285661571的专栏
06-09 4017
网页的页头和页尾一般总要左右填满整个窗口 ，然后某些页面的高度也要填满整个窗口（没解决），我们可以用width:100%; height:100%（有疑问）;设置
div设置width:100%,height:100%，background-color:red但是在页面上不显示
m0_46404398的博客
03-23 1678
最近在学习react，在使用antd的layout组件时，发现直接复制模板代码显示的效果和样例不一样： function App() { return ( <Layout> <Sider>Sider</Sider> <Layout> <Header>Header</Header> <Content
web排版——实现：body全屏（width:100%;height:100%），分left与right两栏，left宽度为固定值（如200px），right宽度为全屏剩下的宽度...
dlxn38744的博客
11-04 263
<!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...
height 100% width 100% width auto height auto
weixin_30273501的博客
03-07 152
css中通过设置元素的height、width遇到的一些奇怪现象 width: auto 1、默认情况下块级标签是有默认的宽度的，也就是width: auto 默认撑满父级标签，以此向上查找父级标签最终会经过 ->body->html 也就是浏览器在初始化就会分配给文档流一个默认的宽度，当然这个宽度也是跟随浏览器变化的，所谓width: 100% 也就是占父级标签的宽度比；...
html中body的width是什么,HTML+CSS入门 如何让body width height 100%使用
weixin_31597881的博客
06-10 2092
首先我们来看一个实际的问题，让body中的一个div占全屏。#div1{background:#ccc;border:1px solid red;width:100%;height:100%;}div1运行后div1还是只占一行，height没有到达全屏。当然，我们以前用过一种方法，就是使用position:absolute,设置top:0,bottom;0这样元素的尺寸就会根据偏移来推断了。不改...
CSS中图片宽度100%时如何根据图片宽度设置成比例的高度
最新发布
beyond520lin的博客
07-04 1060
【代码】CSS中图片宽度100%时如何根据图片宽度设置成比例的高度。
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 1350
题目 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高度100%不起作用,为什么你写的height:100%不起作用
weixin_29531989的博客
06-10 4030
为什么你写的height:100%不起作用？这个知识不算冷门的，但是用的时候可能还是会有些懵逼，不能生效时搜一搜就能找到答案了，但是你真的懂了吗？为什么想要设置一个全屏元素的时候，高度不受%的控制？1.百分比宽高的设定2.width:100%;我们写下这样一段代码，随意设置一个背景色便于观察元素。注意以下代码，记得加上，否则会有所不同。width:100%;height:100%;//宽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、付费专栏及课程。

余额充值