图片上下移动导致页面滚动高度变化，如何固定页面尺寸？

要固定页面尺寸、避免图片超出时页面伸缩，核心是给页面的根容器（<html> 和 <body>）设置固定高度并隐藏溢出内容，同时让 <body> 成为绝对定位图片的参考容器，具体操作如下：

1. 添加CSS样式规则，限制页面容器的尺寸并隐藏溢出：

   • 清除默认的边距和内边距，避免影响尺寸计算
   • 给 <html> 和 <body> 设置固定高度（比如用 100vh 匹配视口高度，也可以设具体像素值）
   • 开启 overflow: hidden，让超出容器范围的内容直接隐藏，不会触发页面滚动或尺寸扩展
   • 给 <body> 设置 position: relative，让绝对定位的图片以body为定位基准（避免图片相对于整个文档流定位导致的溢出问题）

2. 修改后的完整HTML代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden;
        }
        body {
            position: relative;
        }
    </style>
</head>
<body>
  <img class="planetas" src="./Marte.png">
  <script src="dinamismo.js"></script>
  <script> dinamismo("planetas", 700);</script>
</body>
</html>

为什么之前设置max-height没生效？ #

默认情况下，<html> 和 <body> 的高度是由内部内容撑开的，仅设置max-height无法限制其高度——当内容超出max-height时，容器仍会跟随内容扩展。必须同时设置固定的height（或min-height）配合overflow: hidden，才能强制容器保持固定尺寸并隐藏溢出内容。

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