Question

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

默认情况下隐藏div的可见性。这将在稍后响应于用户动作（例如，单击按钮或表单字段）而改变。我遇到的问题是，即使div被隐藏，其内容仍占据模态体中的空间。

换句话说，模态体的高度包括隐藏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>

用小提琴演示我的意思可能更容易。如果您查看this fiddle，然后点击“打开我”，您应该明白我的意思。

隐藏了所有“测试”文本的div，但模态体的高度仍然基于它。我该如何解决这个问题？

感谢您的帮助！

Answer 1

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

.hidden-div {
  display: none;
}

Answer 2

hidden-div使用visibility: hidden。虽然它隐藏了内容，但并没有弥补空间。

详细了解this。

要解决这个问题，应该使用display，如下所示：

.hidden-div {
    display: none;
}

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

2 个答案: