CSS を使用して DIV 要素を表のセルの幅と高さ全体に埋めるにはどうすればよいですか?

CSS を使用してテーブルセルの全幅と高さの DIV を実現する

この問題は何年も未解決のままです。しかし、CSS3 を使用すると、この課題を再検討し、DIV を拡張して表のセルの幅と高さ全体を埋める方法を検討できます。

問題の核心は、セルの寸法とその動的な性質にあります。 100% 値の応答性は限られています。これを克服するには、解決策に賢いトリックが必要です。

まず、テーブルの行にゼロ以外の高さ (たとえば、1px) を割り当てます。このトリックにより、ブラウザによる行の高さの認識がトリガーされ、その後の制御が可能になります。

次に、DIV の高さを 100% に設定します。これで、設定された行の高さに相対的な値になります。これにより、DIV が動的に拡大してセルを垂直方向に埋めることができます。

DIV の幅に一致させるには、CSS を使用してセルの幅を明示的に指定するか、内容に基づいて自動的にサイズを変更できます。

これらを適用するルールにより、初期値または動的な値に関係なく、DIV がテーブル セルの寸法全体を埋めることが保証されます。

例は次のとおりです。 CSS スニペット:

table {
  width: 200px;
}

tr {
  height: 1px;
}

td {
  height: inherit;
}

div {
  height: 100%;
}

以上がCSS を使用して DIV 要素を表のセルの幅と高さ全体に埋めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。