css：表格行：强制一个表格行占据表格的全部高度，并将第二行推到可见区域之外的方式

这是一篇类似的帖子：但我不是强迫内容消失，而是试图强迫实际行消失。我使用cssdisplay:tables来获取div中垂直居中的内容

因此，我有一个网站的一般设置：

-------------------------------------------------
|Row1                                           |
-------------------------------------------------
|Row2                                           |
-------------------------------------------------

我将html设置为：

<div class="A"> //display: table

  <div class="B"> //display: table-row, height: 100% // ROW 1
    <div class="C"> display: table-cell vertically centered contents go here
    </div>
  </div>

  <div class="B"> //display: table-row // ROW 2
    <div class="C"> display: table-cell vertically centered contents go here
    </div>
  </div>

</div>

//显示：表
//显示：表格行，高度：100%//第1行
显示：表格单元格垂直居中的内容位于此处
//显示：表行//第2行
显示：表格单元格垂直居中的内容位于此处

通过将我的“b”div的高度设置为100%，我试图迫使它们占据整个桌子的高度（这样一次只能看到一个，然后我用javascript将它们向上或向下推）

问题是，表格正在增长以显示两个表格行，第2行始终可见。我不想使用display:none

此外，表格高度是可变的，因此我无法将表格设置为200px，将表格行设置为200px

您可以在此处看到javascript将执行的操作的版本：。注意，小提琴的高度是固定的，所以我用边距实现了垂直居中。在上面的示例中，我需要高度可变，因此我必须使用另一种方法垂直居中放置div中的内容（因此我选择显示：table）

是一种方式，
但我想你也可以使用

 height: 0px;

---

高度：0不起作用，因为它不考虑表格单元格的内容。从本质上讲，高度：0被忽略。我不能使用display:none，因为我使用的是javascript。显示：无不允许我需要的动画/过渡。

 height: 0px;