包含按钮的div元素底部出现多余空白，疑与flex布局有关

问题分析 #

你遇到的底部空白不需要移除Flex布局就能解决，核心原因有两个：

1. 父容器#Calculator设置固定高度620px，子元素#inputs占15%、#buttons占80%，两者高度总和仅为容器的95%，剩余5%的空间形成了底部空白。
2. #Calculator的flex-flow: column wrap设置不合理——垂直方向换行在此场景下完全没必要，反而会导致布局逻辑混乱。
   另外，#buttons内部的按钮容器div未设置统一宽度，Flex换行后最后一行元素无法填满容器宽度，也会让视觉上产生底部空白感。

解决方案 #

无需移除Flex，只需调整以下几点：

• 让#buttons自动填充#Calculator的剩余空间，替代固定的80%高度
• 修正#Calculator的Flex方向为垂直不换行
• 给#buttons内的每个按钮容器div设置固定宽度，让按钮均匀排列填满容器

修改后的代码 #

CSS代码 #

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  width: 100vw;
  height: 100vh;
}

div#Calculator {
  width: 320px;
  height: 620px;
  display: flex;
  flex-direction: column; /* 修正为垂直不换行 */
}

div#inputs {
  width: 100%;
  height: 15%; /* 保持输入区原有高度 */
}

div#inputs #inputVal {
  width: 100%;
  height: 100%;
}

div#buttons {
  flex: 1; /* 自动填充剩余空间，替代固定80%高度 */
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}

/* 给每个按钮容器设置固定宽度，确保每行4个按钮均匀分布 */
div#buttons div {
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}

div#buttons div button {
  padding: 28px;
  margin: 5px;
}

HTML代码（保持原结构即可） #

<div id="Calculator">
  <div id="inputs">
    <input id="inputVal" value="">
  </div>

  <div id="buttons">
    <div> <button class="operators"> + </button> </div>
    <div> <button class="operators"> - </button> </div>
    <div> <button class="operators"> x </button> </div>
    <div> <button class="operators"> ÷ </button> </div>
    <div> <button id="erase"> C </button> </div>
    <div> <button class="numbers"> 1 </button> </div>
    <div> <button class="numbers"> 2 </button> </div>
    <div> <button class="numbers"> 3 </button> </div>
    <div> <button class="numbers"> 4 </button> </div>
    <div> <button class="numbers"> 5 </button> </div>
    <div> <button class="numbers"> 6 </button> </div>
    <div> <button class="numbers"> 7 </button> </div>
    <div> <button class="numbers"> 8 </button> </div>
    <div> <button class="numbers"> 9 </button> </div>
    <div> <button class="numbers"> 0 </button> </div>
    <div> <button id="equal"> = </button> </div>
  </div>
</div>

补充说明 #

• 使用flex:1让#buttons填充剩余空间，彻底消除容器底部的空白
• 给按钮容器div设置25%宽度，保证每行4个按钮均匀分布，避免内部排列导致的视觉空白
• 移除不必要的column wrap，让Flex布局逻辑更清晰

内容的提问来源于stack exchange，提问作者ImAWeebキズネです