aside 和 main 默认不等高是因为二者作为块级元素按文档流垂直堆叠，无高度关联；需用 Flex 或 Grid 布局显式实现等高，且须注意 DOM 顺序与语义一致性。
aside 和 main 为什么默认不等高？
因为 aside 和 main 都是块级元素，默认按文档流垂直堆叠，彼此无高度关联。即使它们并列写在 body 下，浏览器也不会自动拉齐高度——除非你用 CSS 显式声明布局模型。
常见错误现象：main 内容短，aside 里有长列表，结果页面右侧出现大片空白；或反过来，aside 被截断，底部内容消失。
- 别指望
vertical-align或line-height起作用——它们对块级兄弟元素无效 -
min-height: 100vh只能保证最小视口高度，不能响应内容增长 - 用
float+overflow: hidden强行撑高，容易触发 BFC 边界错乱，且无法真正“等高”
用 Flex 实现真等高，必须设父容器为 display: flex
Flex 是目前最直接、兼容性足够（Chrome 29+/Firefox 28+/Safari 6.1+）的方案，核心在于：等高是 flex 容器对子项的默认行为，但前提是子项未设 align-items: flex-start 等覆盖值。
典型结构：
<main></main><aside></aside>
对应 CSS：
- 给
body加display: flex和flex-direction: row（注意：若body有 margin/padding，需重置） -
main设flex: 1（自适应宽度），aside设flex: 0 0 280px（固定宽度不缩放） - 两者默认
align-items: stretch，天然等高；无需额外设height或min-height - 如果
aside内部文字太多导致换行撑高，它会推着main一起拉伸——这才是真正的“伸缩”
Grid 布局下等高更可控，但列定义不能省
Grid 的等高是隐式特性，但必须明确定义列轨道，否则 main 和 aside 仍会各自按内容高度渲染。
关键点：
- 父容器（如
body或外层div）必须设display: grid和grid-template-columns: 1fr 280px - 不能只给
aside设grid-column: 2就完事——main必须显式设grid-column: 1，否则它会默认占满整行 - Grid 中子项默认
align-items: stretch，所以等高自动生效；但若某项设了height或max-height，会破坏该行为 - 想让
main在小屏下独占一行？加@media (max-width: 768px) { grid-template-columns: 1fr; }即可，不用改 HTML
DOM 顺序和键盘焦点容易被忽略
视觉上 aside 在右、main 在左，但如果 HTML 中 aside 写在 main 前面，键盘 Tab 流会先跳进侧栏再进主内容——这对屏幕阅读器用户是严重干扰。
解决方式很朴素：
- 保持 HTML 顺序与逻辑主次一致：
main在前，aside在后（尤其当它是全站级辅助内容时） - 用 Flex 布局时，靠
order调整视觉位置，而不是靠 HTML 顺序硬凑：“先写main，再写aside，然后给aside加order: -1” - Grid 不依赖 DOM 顺序，但语义上仍建议
main优先——搜索引擎和读屏器解析 DOM 时，顺序影响权重分配
最常被忽略的不是怎么拉高，而是拉高之后，aside 里的链接是否还能被自然访问、是否仍绑定正确的上下文语义。等高只是表象，语义连贯才是底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
