如何实现覆盖整页内容的顶层Inner border页面布局？

核心问题是原来的伪元素以视口为定位参考，导致无法跟随页面内容高度延伸，调整方案如下：

1. 修改body定位与高度
   给body设置position: relative，让伪元素的绝对定位参考系从视口切换为body；同时添加min-height: 100vh，确保内容不足时边框也能覆盖整个窗口高度，内容超出时body高度自动跟随内容扩展，伪元素也会同步延伸。

2. 调整伪元素与内容布局
   保留伪元素的边框、圆角和z-index设置，确保它始终在内容顶层；给body添加padding: 20px，让普通内容自动避开边框区域，避免被遮挡。

3. 处理全屏宽度区块
   对需要占满窗口宽度的区块，设置margin-left: -20px和margin-right: -20px，抵消body的padding，让区块宽度延伸到窗口边缘，同时因为边框z-index更高，会始终显示在区块上方。

最终代码示例：

body {
  position: relative;
  min-height: 100vh;
  padding: 20px;
  margin: 0; /* 清除浏览器默认margin */
}

body::before {
  border: 2px solid black;
  border-radius: 22px;
  content: '';
  position: absolute;
  top: 20px;
  right: 20px;
  bottom: 20px;
  left: 20px;
  z-index: 1;
}

/* 全屏宽度区块的样式 */
.full-width-block {
  margin-left: -20px;
  margin-right: -20px;
  /* 可根据需求添加背景色等样式 */
  background-color: #f5f5f5;
  padding: 1rem;
}

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