隐藏 div 在 Bootstrap 模态主体中占据高度

Question

我在 Bootstrap 模态对话框中有一个 div，使用 AngularJS directives for Bootstrap。

div 的可见性默认隐藏。这将在稍后响应用户操作（例如，单击按钮或表单字段）而更改。我遇到的问题是，即使 div 被隐藏，它的内容仍然在模态正文中占据 space。

换句话说，模态主体的高度包括隐藏的内容 div，即使它是隐藏的。我不希望发生这种情况。

这是模态模板的人为示例，包括我已设置为隐藏在 CSS:

中的 div

<script type="text/ng-template" id="modal.tmpl.html">
  <div class="modal-header">
    <h3>Modal</h3>
  </div>

  <div class="modal-body">
    <div>I'm a modal.</div>
    <div class="hidden-div">
      Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test <br/> Test
      <br/> Test <br/> Test <br/> Test <br/>
    </div>
  </div>

  <div class="modal-footer">
    Modal footer here
  </div>
</script>

用 fiddle 可能更容易证明我的意思。如果您查看 this fiddle，然后单击 "Open Me"，您应该明白我的意思。

带有所有 "test" 文本的 div 被隐藏，但模态主体的高度仍然基于它。我该如何解决这个问题？

感谢您的帮助！

Answer 1

不使用可见性，而是使用 display 属性。 https://www.w3schools.com/cssref/pr_class_display.asp

.hidden-div {
  display: none;
}

Answer 2

hidden-div利用了visibility: hidden。虽然隐藏了内容，但并没有弥补space.

详细了解 this。

要解决它，应该使用 display 如下：

.hidden-div {
    display: none;
}

隐藏 div 在 Bootstrap 模态主体中占据高度

Hidden div takes up height in Bootstrap modal body

angular-ui-bootstrap

twitter-bootstrap-3