前端新手求助：页面背景随窗口缩放时底部出现空白区域

嘿，别担心～作为前端新手遇到这种小问题太正常啦！我帮你看看代码里的问题，很快就能解决底部空白的情况😊

先说说你代码里的几个小问题： #

• 语法错误：width: 100% 后面少了分号，导致后续的 top: 0、left: 0 属性完全失效；而且 background-positon 拼写错误，正确写法是 background-position，另外这个属性的有效值不是 absolute（absolute 是定位属性，不是背景位置的取值）
• 高度不足：默认情况下 html 和 body 的高度只会随内容撑开，不会自动占满整个浏览器视口，缩放窗口时就容易出现底部空白
• 冗余属性：top: 0 和 left: 0 属于定位属性，你没有给 body 设置 position 属性，所以这些属性根本不起作用

修正后的完整代码： #

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 让html占满视口高度，为body提供继承基础 */
        html {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            background-image:url("https://66.media.tumblr.com/6c5a2aeca064c07feb499ace6b3cd205/87a13546c57cc3af-65/s1280x1920/7f41aeae69f0fac081602c946f5aa9e5c5077c94.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            /* 让背景图片始终居中显示，缩放时保持视觉平衡 */
            background-position: center center;
            /* 固定背景，避免窗口缩放/滚动时背景偏移 */
            background-attachment: fixed;
            margin: 0;
            padding: 0;
            /* 确保body至少占满整个视口高度，彻底避免底部空白 */
            min-height: 100vh;
            overflow: hidden;
            width: 100%;
        }
    </style>
    <title>home</title>
    <link rel="stylesheet" type="text/css" href="css/">
    <link rel="icon" href="https://i.pinimg.com/originals/f9/8f/c3/f98fc32fb656fe36088b94f789019adb.png">
</head>
<body>
</body>
</html>

关键修改说明： #

• 清除了 html 和 body 的默认 margin、padding，避免浏览器自带的留白干扰
• 用 min-height: 100vh 强制 body 高度至少等于视口高度（vh 是视口高度单位，100vh就是当前浏览器窗口的完整高度）
• 修正了 background-position 的拼写和取值，设置为 center center 让背景始终居中，缩放时不会出现偏移
• 添加 background-attachment: fixed，让背景图片固定在视口中，窗口大小变化时不会因为滚动或缩放出现空白

这样修改后，你再调整窗口大小，底部的空白应该就完全消失啦～如果还有其他小疑问随时提哦！

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