网页背景无法覆盖全屏，右侧出现空白栏问题求助

调试个人网站时遇到两个核心问题：

• 网页右侧出现空白栏，背景图片无法覆盖该区域
• 当前使用2560×1600分辨率，用布局生成器搭建的布局，尝试改成笔记本分辨率导致左侧栏超出预期；设置background-repeat: repeat;也未解决问题

1. 固定宽度引发的空白与布局错乱：.layout设置了固定宽度1366px，在2560宽的屏幕下必然留出右侧空白；同时.body元素重复定义且设置了超大固定宽度2560px，会强制撑出横向滚动条，进一步加剧布局混乱。
2. 背景覆盖范围不足：背景图片加在.layout上，但.layout宽度仅1366px，导致右侧空白区域无背景覆盖。
3. HTML结构错误：body标签嵌套在head标签内部，浏览器渲染时会自动修正但可能引发未知异常。

修复步骤：

• 移除.layout的固定宽高，改用min-height: 100vh确保布局至少占满视口高度，宽度默认撑满父容器
• 删除.body元素的固定宽高，让网格布局自动分配中间栏宽度
• 将背景图片移到全局body标签上，确保覆盖整个页面；若需保留在.layout内，需给.layout设置width: 100%
• 修正HTML结构，将body标签移到head标签外部

CSS代码 #

/* 全局重置，消除默认边距与盒模型问题 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  line-height: 1.5;
  color: black;
  /* 背景放在全局body，确保覆盖整个页面 */
  background-image: url("backgrounds/tumblr_mex6qjrEDw1rbvno1.png");
  background-repeat: repeat;
}

.layout {
  /* 移除固定宽高，用min-height保证占满视口 */
  min-height: 100vh;
  display: grid;
  grid:
    "header header header" auto
    "leftSide body rightSide" 1fr
    "footer footer footer" auto
    / auto 1fr auto;
  gap: 8px;
  padding: 8px; /* 加内边距避免内容贴边 */
}

.header { 
  grid-area: header;
}

#float {
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
  font-style: italic;
  font-size: 2em;
  font-weight: bold; 
  color: #fff;
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
  0% { transform: translate(0, 0px); }
  50% { transform: translate(0, 15px); }
  100% { transform: translate(0, 0px); }    
}

.leftSide { 
  grid-area: leftSide;
  border: 2px groove pink;
  margin: 5px 0;
  padding: 10px;
  box-shadow: -1px -1.4px 1px inset #9e9699, 2px 3px 1.5px inset white, 0px 0px 2px #cccacb;  
  background: linear-gradient(180deg, rgba(255,244,248,1) 0%, rgba(255,214,229,1) 100%);
}

.body { 
  grid-area: body;
  padding: 16px; /* 加内边距提升内容可读性 */
}

.rightSide { 
  grid-area: rightSide;
  border: 2px groove pink;
  margin: 5px 0;
  padding: 10px;
  box-shadow: -1px -1.4px 1px inset #9e9699, 2px 3px 1.5px inset white, 0px 0px 2px #cccacb;  
  background: linear-gradient(180deg, rgba(255,244,248,1) 0%, rgba(255,214,229,1) 100%);
}

.footer { 
  grid-area: footer;
  padding: 8px;
}

HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <title> TOOME </title>
    <link href="home.css" rel="stylesheet" type="text/css">
</head>
<body>
    <section class="layout">
        <div class="header"> 
            <div id="float"> 
                <img src="images/toomenutsbetter.png" style="width:auto;height:288px;"> 
            </div> 
        </div>
        <div class="leftSide">
            <center><img src="images/tumblr_ma31eljILG1qid2nw540.gif"></center> 
            <p style="font-family: ms ui gothic;"> 
                welcome to my super awesome pawsome
                <br> website where i do what i want forever...
                <br> (￣y▽￣)╭ ohohoho.....
                <br>
                <br> <img= "images/construction.gif">
            </p>
        </div>
        <div class="body"><p>i farted </p></div>
        <div class="rightSide"><p>i farted really loud </p></div>
        <div class="footer"> <p>i farted </p> </div>
    </section>
</body>
</html>

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