DIV 取其父级的高度

Question

我有以下 HTML 可以正常工作。但我希望 div 采用选项卡的高度，而不必说它的 200px。如果我给 100% 它不起作用。请忽略 draggable 作为它的第 3 方

<b-tab title="TAB">
  <div class="table-wrapper-scroll-y custom-scrollbar">
    <table class="table table-sm table-bordered table-striped table-hover">
      <draggable :list="myLoop" :options="dragOptions" :element="'tbody'" class="rows">
        <tr class="cursor-ns-resize" v-for="(row, index) in myLoop" :key="index">
          <td>
            <b-form-checkbox type="checkbox" v-model="row.checked" />
          </td>
          <td>
            <span>{{ row.label }}</span>
          </td>
        </tr>
      </draggable>
    </table>
  </div>
</b-tab>

CSS

.custom-scrollbar {
  position: relative;
  height: 200px;
  overflow: auto;
}

.table-wrapper-scroll-y {
  display: block;
}

Answer 1

如果您给父级 (b-tab) 弹性，那么子级 div 将继承高度（只要没有为 div 分配隐式高度）。您需要将div 设置为将flex-grow 和flex-shrink 设置为1（或将它们组合成单个flex 属性-flex: 1 1）。

为了演示目的，我为这两个元素添加了一些彩色边框：

b-tab {
  border: 1px solid red;
  height: 200px;
  display: flex;
}

.custom-scrollbar {
  position: relative;
  overflow: auto;
  border: 1px solid blue;
  flex: 1 1;
}

.table-wrapper-scroll-y {
  display: block;
}

<b-tab title="TAB">
  <div class="table-wrapper-scroll-y custom-scrollbar">
    <table class="table table-sm table-bordered table-striped table-hover">
      <draggable :list="myLoop" :options="dragOptions" :element="'tbody'" class="rows">
        <tr class="cursor-ns-resize" v-for="(row, index) in myLoop" :key="index">
          <td>
            <b-form-checkbox type="checkbox" v-model="row.checked" />
          </td>
          <td>
            <span>{{ row.label }}</span>
          </td>
        </tr>
      </draggable>
    </table>
  </div>
</b-tab>

Answer 2

也许你需要添加

*{//this effects every element
margin:0;
padding:0;
}

大多数浏览器在您的 CSS 中添加 x 边距和内边距