Flexbox布局中仅移除footer时出现额外滚动条的原因解析

示例代码 #

CSS #

body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

header,
footer {
  background: green;
}

main {
  flex: 1;
  display: flex;
}

div {
  flex: 1;
}

textarea {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  resize: none;
}

div#one textarea {
  background: lightBlue;
}

div#two textarea {
  background: tan;
}

HTML #

<header>Header</header>
<main>
  <div id="one"><textarea>Textarea 1</textarea></div>
  <div id="two"><textarea>Textarea 2</textarea></div>
</main>
<footer>Footer</footer>

问题现象 #

移除header元素时页面无滚动条；移除footer元素时，页面出现额外滚动条。

疑问 #

为何仅在移除footer元素时才会出现该问题？

说明：已知消除滚动条的方法，仅需了解该现象的原因。

原因解析 #

问题核心在于textarea的默认垂直对齐规则和flex布局的空间计算逻辑：

• textarea属于替换元素，默认vertical-align属性值为baseline（基线对齐），这种对齐方式会让textarea底部与父容器基线之间保留一小段间距。
• 当footer存在时，main元素的底部被footer限制，textarea基线对齐产生的微小间距被footer的高度覆盖，页面总高度不会超过100vh，因此无滚动条。
• 移除footer后，main元素底部直接对齐body底部，此时textarea基线对齐的间距会让它的底部超出main范围，导致页面总高度略大于100vh，触发浏览器滚动条。
• 而移除header时，main顶部对齐body顶部，textarea的基线对齐不会产生向下的额外偏移（偏移方向向上，不会超出视口），页面总高度仍等于100vh，自然不会出现滚动条。

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