body{width:100%}但窗口出现滚动条&body的子元素height:100%实际高度未填满整个页面

width/height百分比设置

参考链接1:width=100%时会出现滚动条的情况
参考链接2:html,body设置高度100%和默认的滚动条

问题一:body{width:100%}但窗口出现滚动条

代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>body{width":100%;}窗口有滚动条</title>
<style>
    body{
        width:100%;}
   div{
       background-color:pink;
        }
</style>
</head>
<body>
<div></div>
</body>
</html>

运行结果为:横向出现滚动条。

原因分析:

一个对象高度是否可以使用百分比显示,取决于对象的父级对象。 width=100%的基准是谁,也就是说它是相对于谁而言的?它的参照物是谁?根据CSS的相关知识我们知道,当子元素没有设置样式时,子元素会继承其父元素的样式,而在本例当中,父元素body的父元素又是谁呢?答案是标签html。

html标签也可以理解为当前浏览器的可视窗口,所以它的宽度是整个浏览器窗口的宽度,而浏览器具有放大缩小的功能,所以它就会把子元素的宽度设置为当前可见区域的宽度,所以就会出现滚动条的情况,当滑动滚动条时,子元素的内容就会随着浏览器窗口的可视宽度进行显示

修正方法

  1. 添加 *{margin=0;}(推荐)

    • 原因:浏览器的默认margin不一定为0,当确认margin=0,body与html的width大小相同,不再出现滚动条。
    • 此外,添加 *{margin=0;padding=0;}应成为一个习惯,用于消除浏览器的默认设置,防止不同浏览器的显示效果不同。
  2. 修改 body{width:100%;} 为 html{width:100%;}
    • 原因:直接修改整体视图.
  3. 设置width值时,设置一个不为100%的值。(如果需要用滚动条来显示溢出的话,那么可以把overflow设置为auto或者scroll)

问题二:body的子元素height:100%,但实际高度未填满整个页面

代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>子元素height不能填充100%</title>
<style>
   *{
   margin:0;
   padding:0;
   }
   div{
       width:100%;
       height:100%;
       background-color:pink;
        }
</style>
</head>
<body>
<div></div>
</body>
</html>

运行结果为:div高度未填满整个页面。

原因分析

div的父级是body,浏览器默认状态下,body没有height属性。因此当我们直接设置div为height:100%;时没有效果。

只有当我们给父级body设置了100% 之后,它的子级对象div的height:100%;才可能会发生作用,这便是浏览器解析规则引发的高度自适应问题

但仅仅修改body的height为100%(代码修改一),或者仅仅修改html的height为100%(代码修改二)都同样不起作用。为了各浏览器的兼容性,应为body与html同时设置height:100%;。

错误示范1:仅修改body的height

<style>
/*代码修改一*/
   *{
       margin:0;
       padding:0;
   }
   body{
       width:100%;
       height:100;
   }
   div{
       width:100%;
       height:100%;
       background-color:pink;
        }
</style>

错误示范2:仅修改html的height

<style>
/*代码修改二*/
   *{
       margin:0;
       padding:0;
   }
   html{
       width:100%;
       height:100;
   }
   div{
       width:100%;
       height:100%;
       background-color:pink;
        }
</style>

正确操作示范:

body对象与html对象同时相同的样式设计。

<style>
/*代码修改三:正确示范*/
   *{
       margin:0;
       padding:0;
   }
   html,body{
       width:100%;
       height:100;
   }
   div{
       width:100%;
       height:100%;
       background-color:pink;
        }
</style>
使用2021版本unity发布webgl,下面代码怎么修改<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Unity WebGL </title> <link rel="shortcut icon" href="TemplateData/favicon.ico"> <link rel="stylesheet" href="TemplateData/style.css"> <script src="TemplateData/UnityProgress.js"></script> <script src="Build/UnityLoader.js"></script> <!-- 在这里加入CSS规则 --> <style> body, html { margin: 0; padding: 0; height: 100%; width: 100%; /* 保证占满整个屏幕宽度 */ overflow: hidden; /* 防止出现滚动条 */ display: flex; justify-content: center; align-items: center; } #unityContainer { width: 100% !important; height: 100% !important; background-color: black; /* 可选,设置背景颜色 */ } canvas { width: 100%; height: 100%; } </style> <script> var unityInstance = UnityLoader.instantiate("unityContainer", "Build/githubstone_new.json", { onProgress: UnityProgress }); window.addEventListener("resize", OnResize); // 拆分参数处理逻辑为独立函数 function OnResize() { unityInstance.SendMessage("DebugText", "SetWidth", window.innerWidth); unityInstance.SendMessage("DebugText", "SetHeight", window.innerHeight); unityInstance.SendMessage("DebugText", "OnResize"); // 触发Unity中的分辨率更新 unityInstance.SendMessage('DebugText', 'ForceRefresh'); } </script> </head> <body style="margin:0; overflow:hidden;"> <div id="unityContainer"></div> </body> </html>
07-09
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

picoasis

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值