HTML页面aside元素定位问题：右侧蓝色竖线无法正确显示

一周前我开始学习HTML和CSS，为了练习，决定用已学知识模仿旧网页。我在实现页面右侧的蓝色竖线时遇到困难。我尝试使用空aside标签，设置width为4.85%、padding-right为30%，但该aside并未在右侧留出30%间距并占据4.85%宽度，反而位于页面左侧，占据了页面30%的宽度。

当前代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ELECTRIC PAGES Reading Notes</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <main>
      <header>
        <img src="assets/ga.gif" alt="" />
        <br>
        <img src="assets/eptype2.gif" alt="" />
      </header>
      <aside class="aside1">
        <img src="/assets/epnav5.gif" alt="" />
      </aside>
      <h2>Reading Notes</h3>
      <aside class="aside2"></aside>
    </main>
  </body>
</html>

CSS代码 #

head,
body {
  background-color: lightcyan;
  margin: auto;
}

header {
  width: 100%;
  padding-left: 4.85%;
  margin: auto;
}

.aside1 {
  position: absolute;
  width: 4.85%;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: rgb(35, 168, 221);
}

.aside2 {
  position: absolute;
  width: 4.85%;
  padding-right: 30%;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: rgb(35, 168, 221);
}

img {
  padding: 10px;
}

h2 {
  color: red;
  padding-left: 5.5%;
}

当前效果截图 #

问题根源 #

1. .aside2设置了left: 0，强制元素定位在页面左侧，无法出现在目标右侧位置。
2. 默认盒模型下，padding-right会在元素宽度基础上额外增加宽度，导致元素总宽度变为4.85% + 30%，这就是它占据页面30%宽度的原因。

修改后的CSS代码 #

调整.aside2的定位逻辑，同时给父容器main添加相对定位，确保绝对定位元素以main为参考布局：

/* 给main添加相对定位，作为绝对定位元素的参考容器 */
main {
  position: relative;
  min-height: 100vh; /* 确保main高度覆盖视口，让竖线延伸到底部 */
}

.aside1 {
  position: absolute;
  width: 4.85%;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: rgb(35, 168, 221);
}

.aside2 {
  position: absolute;
  width: 4.85%;
  right: 30%; /* 直接设置距离右侧30%，实现右侧留白 */
  top: 0;
  bottom: 0;
  background-color: rgb(35, 168, 221);
}

额外修正 #

HTML中h2标签闭合错误，将</h3>改为</h2>，避免页面结构混乱。

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