如何实现可滚动的全屏元素？纯CSS解决方案求助

问题根源 #

你当前代码使用position:absolute将.MAX元素脱离了正常文档流，导致后续内容被覆盖且页面无法自然滚动。另外，浏览器默认的body边距会造成左侧/顶部留白，这也是你之前遇到的问题之一。

修复方案 #

通过以下调整实现自然滚动的全屏色块：

1. 重置默认样式：清除body的默认边距和内边距，消除留白。
2. 移除绝对定位：让色块元素保持在正常文档流中，确保内容可堆叠滚动。
3. 使用视口单位定义尺寸：每个色块占满整个视口高度，宽度自适应。

修正后的CSS代码

body {
  margin: 0;
  padding: 0;
}

.MAX {
  width: 100%;
  height: 100vh;
}

示例HTML代码

<div class="MAX" style="background:red;"></div>
<div class="MAX" style="background:blue;"></div>
<p>现在我可以被正常显示了！</p>

说明 #

• height:100vh确保每个色块恰好占满当前视口高度。
• width:100%让色块自适应页面宽度，避免100vw可能带来的水平滚动问题。
• 移除position:absolute后，元素按正常流堆叠，页面可自然滚动到后续内容。

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