Comment étendre un élément DIV jusqu'à la hauteur de sa cellule de tableau ?

Comment étirer un DIV pour remplir la hauteur d'une cellule de tableau

Dans certaines mises en page HTML, vous aurez peut-être besoin d'un élément DIV pour étirer verticalement pour correspondre à la hauteur de sa cellule du tableau parent (TD). Cela vous permet de positionner précisément le contenu dans le DIV, par exemple en l'alignant dans le coin inférieur droit de la cellule.

Pour y parvenir, une approche consiste à définir une hauteur de 1 px pour le TD. Cela fournit au DIV une hauteur parent définie à partir de laquelle calculer son pourcentage de hauteur. Étant donné que le contenu du DIV est supérieur à 1 px, le TD et par conséquent le DIV s'étendront automatiquement verticalement.

Voici un exemple :

<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;
}

Dans cet exemple, le TD a une hauteur de 1 px et une couleur d'arrière-plan à des fins de démonstration. Le DIV à l'intérieur du TD a une hauteur de 100 %, ce qui l'amène à s'étirer verticalement pour remplir le TD. L'image d'arrière-plan est ensuite positionnée dans le coin inférieur droit du DIV grâce à la propriété background-position.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!