css: table-row: способ заставить одну строку таблицы взять всю высоту стола и вытолкнуть второй ряд из видимой области

Question

Это аналогичный пост: force table row into single line, но вместо того, чтобы заставить контент исчезать, я пытаюсь заставить фактическая строка исчезнет. Я использую дисплей CSS: таблицы, чтобы получить содержимое вертикально расположенное в центре 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> 

Установив высоту моего «b» div на 100%, я пытаюсь заставить их занять всю высоту таблицы (так что только один будет виден за раз - тогда я ' m подталкивая их вверх или вниз с помощью javascript).

Проблема в том, что таблица растет, чтобы показать обе строки таблицы, строка 2 всегда видна. Я не хочу использовать display: none.

Кроме того, высота таблицы является переменной, поэтому я не могу установить таблицу, то есть 200px и строку таблицы, равную 200px.

Вы можете увидеть версию того, что javascript будет здесь: jsfiddle. Заметьте, скрипка - фиксированная высота, поэтому я достиг вертикального центрирования с полями. В приведенном выше примере, мне нужна высота, чтобы быть переменными, поэтому я должен использовать другой метод для вертикального центрирования содержимого в дивах (таким образом мой выбор отображения: таблица)

Answer 1

display:none; 

это путь,
но я полагаю, вы также можете использовать

height: 0px;