当 flexbox 中没有页脚时会出现额外的滚动条 [重复]

Question

示例代码

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;
}

<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

时才发生

？

注意：我知道如何摆脱滚动条。

Answer 1

出现滚动条是因为textarea默认是一个inline-block元素，底部缩进。有两种方法可以解决这个问题：

• 将父项设置为零字体大小或行高（适用于您的情况，但不推荐）；
• 正确的是将

  display:block

  设置为textarea本身。

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

header,
footer {
  background: green;
}

main {
  flex: 1;
  display: flex;
}

div {
  flex: 1;
  /* font-size: 0;   */
  /* line-height: 0; */
}

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

div#one textarea {
  background: lightBlue;
}

div#two textarea {
  background: tan;
}

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