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

转载已于 2023-02-16 10:28:54 修改 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://t.csdn.cn/lKQvQ

文章标签：

#css

于 2023-02-15 10:17:54 首次发布

学习笔记 | css 专栏收录该内容

20 篇文章

订阅专栏

本文主要探讨了CSS中body宽高百分比设置的两个问题。一是设置body{width:100%}时窗口出现滚动条，分析了原因并给出添加*{margin=0；}等修正方法；二是body子元素height:100%却未填满页面，指出需同时为body与html设置height: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标签也可以理解为当前浏览器的可视窗口，所以它的宽度是整个浏览器窗口的宽度，而浏览器具有放大缩小的功能，所以它就会把子元素的宽度设置为当前可见区域的宽度，所以就会出现滚动条的情况，当滑动滚动条时，子元素的内容就会随着浏览器窗口的可视宽度进行显示

修正方法：