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

最新推荐文章于 2023-07-09 14:58:09 发布

picoasis

最新推荐文章于 2023-07-09 14:58:09 发布

阅读量1.3w

点赞数 5

本文链接：https://blog.csdn.net/lamanchas/article/details/78427044

版权

widthheight百分比设置
- 问题一bodywidth100但窗口出现滚动条
  - 原因分析
  - 修正方法
- 问题二body的子元素height100但实际高度未填满整个页面
  - 原因分析
  - 正确操作示范

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

修正方法：

添加 *{margin=0；}（推荐）
- 原因：浏览器的默认margin不一定为0，当确认margin=0，body与html的width大小相同，不再出现滚动条。
- 此外，添加 *{margin=0；padding=0;}应成为一个习惯，用于消除浏览器的默认设置，防止不同浏览器的显示效果不同。
修改 body{width：100%；} 为 html{width:100%;}
- 原因：直接修改整体视图.
设置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>