Question

我创建了一个Vuetify应用，该应用管理一些卡片项目。在添加操作/按钮之前，我先检查了用户的权限。如果缺少某些权限，则不会呈现这些按钮。我在这里创建了一个例子

https://codepen.io/anon/pen/RmMRQb?editors=1010

如您所见，第二个div崩溃是因为未渲染任何子级。此问题与Vuetify无关，因此我将使用默认的HTML / CSS示例重现该问题。

.container {
  background: red;
}

.box {
  display: inline-block;
  height: 32px;
  width: 32px;
  margin: 5px;
  background: blue;
}

.notRendered {
  display: none;
}

<div id="app">
  <h1>Div with visible elements</h1>
  <div class="container">
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
  </div>
  <h1>Div with hidden elements</h1>
  <div class="container">
    <div class="box notRendered">
    </div>
    <div class="box notRendered">
    </div>
    <div class="box notRendered">
    </div>
  </div>
</div>

我不希望div崩溃。我已经在这里找到解决方案

JQuery: Prevent div from collapsing when element hides()

，但想问一问是否有一种方法可以不使用一些硬编码的高度或选择元素的高度来实现它。我不想修改Vuetify的本机元素，所以当操作栏为空（没有渲染任何子项）并且该栏不会折叠时，也许会有一个窍门。

Answer 1

我为默认/本地容器添加了一个辅助类。我认为这是最好/最简单的方法。

.improved-container {
  background: red;
  min-height: 40px;
}

.box {
  display: inline-block;
  height: 32px;
  width: 32px;
  margin: 5px;
  background: blue;
}

.notRendered {
  display: none;
}

<div id="app">
  <h1>Div with visible elements</h1>
  <div class="container improved-container">
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
  </div>
  <h1>Div with hidden elements</h1>
  <div class="container improved-container">
    <div class="box notRendered">
    </div>
    <div class="box notRendered">
    </div>
    <div class="box notRendered">
    </div>
  </div>
</div>

防止div在隐藏或删除所有子元素时崩溃

1 个答案: