Comment puis-je faire en sorte qu'un élément Div imbriqué remplisse la hauteur de son conteneur parent TD ?-tutoriel CSS-php.cn

How Can I Make a Nested Div Element Fill the Height of its TD Parent Container?

Style des éléments imbriqués pour remplir la hauteur du conteneur parent

En HTML, vous pouvez rencontrer des situations dans lesquelles un élément enfant doit se développer pour remplir la hauteur de son conteneur parent. Cela peut être difficile lorsqu'il s'agit d'éléments de tableau, tels que

éléments dans éléments.

Objectif : Créer un

l'élément occupe entièrement la hauteur de son conteneur, permettant un positionnement correct des éléments d'arrière-plan.

Solution :

Envisagez d'utiliser une astuce pour établir une hauteur fixe pour le élément, même s'il s'agit d'une valeur minimale comme 1px. Cela crée un parent avec une hauteur définie, permettant au

élément pour calculer correctement sa hauteur en pourcentage.

Répartition détaillée :

Définissez une hauteur pour l'élément Élément : Attribuez une hauteur de 1 px à l'élément élément en utilisant CSS :

td.thatSetsABackground {
  height: 1px;
}

Copier après la connexion

Calculer le pourcentage de hauteur de
Élément : Le
L'élément aura désormais un parent avec une hauteur définie. Sa hauteur peut être définie en pourcentage de cette hauteur parent :

div.thatSetsABackgroundWithAnIcon {
  height: 100%;
}

Copier après la connexion

Positionner l'élément d'arrière-plan : L'élément d'arrière-plan souhaité dans le
peut être positionné dans le coin inférieur droit à l'aide de CSS, en fonction de la hauteur développée du div :

div.thatSetsABackgroundWithAnIcon {
  background-position: bottom right;
}

Copier après la connexion

Cette approche force le

pour remplir la hauteur de l'élément élément, permettant le placement précis des éléments d'arrière-plan dans le conteneur parent.

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!

source：php.cn

Article précédent：Comment puis-je accéder aux attributs de style de classe CSS à l'aide de JavaScript ou de jQuery ? Article suivant：Comment positionner un Div au bas de son conteneur avec Text Wrap ?

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2161

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2310

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

1948

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...