SPA中<article>内容过少右对齐及布局偏移问题排查

1. 内容少时<article>右对齐问题 #

这个问题核心是容器对齐规则在内容不足时触发了右对齐行为，和<article>/<div>标签无关。解决方法很直接：

• 如果<main>是网格布局的子项，给<main>或其内部内容容器设置 justify-self: start，强制内容左对齐，不受内容多少影响：

main {
  justify-self: start;
  width: 100%; /* 确保撑满网格分配的宽度 */
}

• 如果是flex布局，给<main>的父容器设置 justify-content: flex-start，同时给<article>设置 width: 100%：

.main-container {
  display: flex;
  justify-content: flex-start;
}
article {
  width: 100%;
}

2. 移除外层#spa容器后<main>被侧边栏挤到下方 #

#spa容器是用来控制整体网格布局的，移除后<main>默认是display:block，会独占一行。需要给全局容器（比如body）重新设置网格布局来固定header、navbar、main的位置：

body {
  margin: 0;
  display: grid;
  grid-template-columns: 220px 1fr; /* 侧边栏宽度 + 主内容区占剩余空间 */
  grid-template-rows: auto 1fr; /* header自适应高度 + 内容区占满剩余视口 */
  grid-template-areas:
    "header header"
    "sidebar main";
  min-height: 100vh;
}

header {
  grid-area: header;
  background: #eee;
}
nav {
  grid-area: sidebar;
  background: #ddd;
}
main {
  grid-area: main;
  padding: 1rem;
}

3. 重新添加网格容器后<main>内容超出100vh视口 #

这是因为网格容器的height:100vh限制了整体高度，但<main>内容溢出时没有开启滚动。给<main>设置垂直滚动即可：

main {
  overflow-y: auto;
  /* 可选：隐藏横向滚动条，避免内容溢出时出现横向滚动 */
  overflow-x: hidden;
}

这样当<main>内容超过视口高度时，只会在<main>内部出现滚动条，整体页面不会超出100vh。

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