如何消除设置宽高为100%时HTML页面的偏移与白边问题？

你遇到的问题是浏览器默认样式导致的，直接给body设置宽高100%不会清除默认边距，同时html元素默认高度未设置，导致布局异常。你的测试代码如下：

<html>
    <head>
    </head>
    <style>
        body{
            width: 100%;
            height: 100%;
        }
        .screen{
            width:100%;
            height:100%;
            background-color: aqua;
        }
    </style>
    <body>
        <div class="screen"></div>
    </body>
</html>

问题根源 #

1. 浏览器默认给html和body添加了8px的margin，这就是左上角白边和元素偏移的直接原因
2. body的height:100%基于父元素（html）高度计算，但html默认未设置height:100%，导致body实际高度未占满整个视口

修复方案 #

重置默认样式并完善高度继承，修改后的代码如下：

<html>
    <head>
    </head>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            box-sizing: border-box;
        }
        .screen{
            width:100%;
            height:100%;
            background-color: aqua;
        }
    </style>
    <body>
        <div class="screen"></div>
    </body>
</html>

关键修改说明 #

• margin: 0; padding: 0：彻底清除浏览器给html和body的默认边距，解决白边和偏移问题
• html设置height:100%：让body的height:100%能正确继承，确保容器占满整个视口高度
• box-sizing: border-box：可选但推荐，让元素的padding和border包含在设置的宽高内，避免后续布局出现意外溢出

内容的提问来源于stack exchange，提问作者Gosav Ionut