css - css: table-row: 1 つのテーブル行を強制的にテーブルの高さいっぱいまで取得し、2 行目を表示領域の外に押し出す方法

Question

これは同様の投稿です:表の行を 1 行に強制しますが、コンテンツを強制的に非表示にする代わりに、実際の行を強制的に非表示にしようとしています。css display: 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>

"b" div の高さを 100% に設定することで、テーブルの高さ全体を強制的に占有しようとしています (一度に 1 つだけが表示されるように、それらを上下に押します)ジャバスクリプトで）。

問題は、テーブルが拡大して両方のテーブル行が表示されることです。行 2 は常に表示されます。display: none を使用したくありません。

また、テーブルの高さは可変であるため、テーブルを 200px に、テーブル行を 200px に設定することはできません。

ここで、JavaScript が何を行うかのバージョンを確認できます: jsfiddle。フィドルは高さが固定されているため、マージンを使用して垂直方向の中央揃えを実現したことに注意してください。上記の例では、高さを可変にする必要があるため、別の方法を使用して div 内のコンテンツを垂直方向に中央揃えにする必要があります (したがって、私のディスプレイの選択: テーブル)

Answer 1

display:none; 

行く方法
ですが、使用することもできると思います

 height: 0px;