如何消除HTML表单中隐藏元素占用的多余空间？

你遇到的问题核心是**visibility: hidden的特性**——这个属性只是让元素不可见，但不会从页面布局中移除它，所以对应的空间会一直保留。要彻底让元素消失并释放占用的布局空间，得改用display: none。

修改方案 #

1. 替换JS中的控制属性

把原来控制visibility的代码改成控制display：

window.addEventListener('load', () => { 
  document.getElementById('cbox1').addEventListener('click', (e) => {
    const show = e.target.checked;
    // 显示时恢复元素默认的display值，隐藏时设为none
    const displayStatus = show ? '' : 'none';
    document.getElementById("end1").style.display = displayStatus;
    document.getElementById("tap1").style.display = displayStatus;
    document.getElementById("atnd1").style.display = displayStatus;
    document.getElementById("lbl1").style.display = displayStatus;
    document.getElementById("lbl2").style.display = displayStatus;
  });
});

2. 更新CSS初始状态

把CSS中对应元素的visibility: hidden改成display: none：

form[id=fbd1] {
  width : 250px;
  height : 320px;
  position: absolute;
  top: 71%;
  left: 16%;
  background-color: #fff;
  box-shadow: 0 0 20px;
  text-align:center;
  padding-left :10px;
  padding-top :5px;
  border-radius: 8px;
  resize:vertical;
  overflow:auto;
}

#lbl1,#end1,#tap1,#lbl2,#atnd1 {
  display : none;
}

更简洁的优化方案 #

把需要控制显示隐藏的元素打包到一个容器里，这样只需要操作一个DOM元素，代码更简洁易维护：

修改后的HTML

<iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>
<form id="fbd1" action="submitscript.php" target="dummyframe">
    <textarea id="tbd1" placeholder="Enter your details"></textarea>
    <br>
    <label>Start Time</label>&nbsp;&nbsp;<input id="strt1" type="time">&nbsp;&nbsp;&nbsp;<input id="cbox1" type="checkbox">
    <br><br>
    <!-- 把需要控制的元素统一放到一个div容器中 -->
    <div id="extra-fields" style="display: none;">
      <label id="lbl1">End Time</label>&nbsp;&nbsp;<input id="end1" type="time">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <br>
      <br>
      <textarea id="tap1" placeholder="Enter plan details"></textarea>
      <br>
      <label id="lbl2">Named By</label>&nbsp;&nbsp;<input id="atnd1" type="text">
      <br><br>
    </div>
    <input type="submit" id="btn10" value="submit">
</form>

简化后的JS

window.addEventListener('load', () => { 
  document.getElementById('cbox1').addEventListener('click', (e) => {
    const extraFields = document.getElementById('extra-fields');
    extraFields.style.display = e.target.checked ? 'block' : 'none';
  });
});

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