页面缩放时日历顶部超出body无法滚动的问题求助

当页面放大至200%及以上时，日历顶部内容会超出body范围且无法向上滚动查看，继续放大后顶部内容完全移出视野。

原因分析 #

• 绝对定位居中的局限性：最外层容器使用position: absolute + top:50% + transform: translate(-50%, -50%)实现居中，这种方式的核心问题是：当元素总高度超过视口高度时，元素顶部会超出视口，但absolute定位的元素不会撑开body的高度，body高度仍等于视口高度，导致浏览器仅生成针对视口的滚动条，无法滚动查看超出顶部的内容。
• 固定背景的适配问题：.calendar__picture中的background-attachment: fixed在页面缩放时，背景定位会基于视口而非容器，可能加剧顶部内容的视觉偏移，但核心矛盾还是居中方式导致的滚动失效。

修复方案 #

1. 替换居中方式为Flex布局

给body设置Flex布局实现整体居中，让body自动适配内容高度，当内容超出视口时，滚动条能覆盖整个内容范围。

2. 调整背景属性（可选）

移除background-attachment: fixed，让背景相对于容器定位，避免缩放时的位置偏差。

修改后的代码 #

HTML（移除外层inline样式，新增容器）

<div class="calendar-wrapper">
  <div class="calendar">
    <div class="calendar__picture"></div>
    <div class="grid-container" id="grid_container">
      <div class="grid-item-number">22</div>
      <div class="grid-item-number">23</div>
      <div class="grid-item-number">24</div>
      <div class="grid-item-number">25</div>  
      <div class="grid-item-number">26</div>
      <div class="grid-item-number">27</div>
      <div class="grid-item-number">28</div>
      <div class="grid-item-number">29</div>
      <div class="grid-item-number">30</div>
      <div class="grid-item-number">31</div>

      <div class="grid-item-number">22</div>
      <div class="grid-item-number">23</div>
      <div class="grid-item-number">24</div>
      <div class="grid-item-number">25</div>  
      <div class="grid-item-number">26</div>
      <div class="grid-item-number">27</div>
      <div class="grid-item-number">28</div>
      <div class="grid-item-number">29</div>
      <div class="grid-item-number">30</div>
      <div class="grid-item-number">31</div>

      <div class="grid-item-number">22</div>
      <div class="grid-item-number">23</div>
      <div class="grid-item-number">24</div>
      <div class="grid-item-number">25</div>  
      <div class="grid-item-number">26</div>
      <div class="grid-item-number">27</div>
      <div class="grid-item-number">28</div>
      <div class="grid-item-number">29</div>
      <div class="grid-item-number">30</div>
      <div class="grid-item-number">31</div>
    </div>
  </div>
</div>

CSS（新增全局居中样式，调整容器与背景）

/* 全局样式设置 */
body {
  margin: 0;
  padding: 20px; /* 避免内容贴边 */
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 确保内容顶部不被视口截断 */
  box-sizing: border-box;
}

.calendar-wrapper {
  width: 100%;
  max-width: 700px;
  margin: auto; /* 水平居中，垂直方向随内容自适应 */
}

.calendar {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 5px 50px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  overflow: hidden;
}

.calendar__picture {
  position: relative;
  height: 200px;
  color: #fff;
  /* 移除fixed，让背景随容器缩放 */
  background: url("/static/serviss.png") 70% 100%/ 700px 273px no-repeat;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 10px;
}

.grid-item-number {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(175, 175, 175, 0.8);
  border-radius: 10px;
  margin: auto;
  margin-bottom: 10px;
  font-size: 30px;
  position: relative;
  width: 95%;
  aspect-ratio: 1/1;
}

关键说明 #

• 使用body的Flex布局，align-items: flex-start确保内容顶部不会被视口截断，当内容高度超过视口时，body会被撑开，滚动条能覆盖整个内容范围。
• 新增calendar-wrapper替代原inline样式容器，结构更清晰易维护。
• 移除background-attachment: fixed后，背景会随容器一起缩放，避免定位偏差。

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