DIV 要素をテーブルのセルの高さまで伸ばすにはどうすればよいですか?

表のセルの高さを埋めるために DIV を引き伸ばす方法

特定の HTML レイアウトでは、引き伸ばすために DIV 要素が必要になる場合があります。親テーブルセル (TD) の高さに合わせて垂直方向に移動します。これにより、コンテンツをセルの右下隅に揃えるなど、DIV 内にコンテンツを正確に配置できます。

これを実現するには、TD に 1 ピクセルの高さを設定する方法があります。これにより、DIV に、高さのパーセンテージを計算するための定義された親の高さが提供されます。 DIV のコンテンツは 1px より大きいため、TD とその結果 DIV は自動的に垂直方向に拡張されます。

例を次に示します:

<table>

CSS:

.td-container {
  background-color: #f5f5f5;
}

.div-content {
  height: 100%;
  background-image: url(icon.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
}

この例では、TD の高さは 1 ピクセルで、デモ用に背景色が設定されています。 TD 内の DIV の高さは 100% なので、垂直方向に伸びて TD を埋めます。背景画像は、background-position プロパティにより DIV の右下隅に配置されます。

以上がDIV 要素をテーブルのセルの高さまで伸ばすにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。