隐藏的 div 在引导模态主体中占据高度

Question

我在 Bootstrap 模式对话框中有一个div，使用 AngularJS 指令进行引导。

默认情况下，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>

用小提琴来证明我的意思可能更容易。如果你看看这个小提琴，然后点击"打开我"，你应该明白我的意思。

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

感谢您的任何帮助！

Answer 1

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

阅读更多关于这个的信息。

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

.hidden-div {
display: none;
}

Answer 2

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

.hidden-div {
display: none;
}