28172 sujets

CSS et mise en forme, CSS3

Largeur d'une child div égale à la hauteur (en %) d'une parent div

Bonjour!
Pour simplifier mon problème, disons que j'ai dans mon body une balise div d'id "parent" et à l'intérieur de celle-ci j'ai une autre balise div d'id "child" cette fois-ci.
J'ai défini en CSS la taille de ma div "parent" avec une longueur de 100% et une largeur de 100%. J'aimerai maintenant que la div "child" soit un carré, dont la largeur et la hauteur soient égales à la hauteur de ma div "parent".
J'ai réussi à le faire mais seulement en définissant la hauteur de ma div "parent" en pixels, or j'ai besoin qu'elle soit définie en pourcents car si j'ai ici simplifié le problème, ces deux div s'intégreront dans d'autres divs dans la réalité.
Merci d'avance, je mets un jsfiddle pour que vous voyiez ce que je cherche à faire visuellement: https://jsfiddle.net/zuyv7nsg/
Salut Pouit,
C'est ça que tu cherches à faire? https://jsfiddle.net/r3vdbc5y/

html, body{
	width: 100%;
	height: 100%;
	margin: 0;
}

#parent {
	width: 100%;
	--parentHeight: 100vh;
	height: var(--parentHeight);
	background-color: red;
}

 #child {
   height: calc(var(--parentHeight));
   width: calc(var(--parentHeight));
   background-color: green;
 }
Non, si je mets 100vh il me prends la hauteur totale du viewport, comme je l'ai dis la parent div est elle même contenue dans d'autres divs, et donc avec 100vh la parent div "sort" de sa propre division parente...
Ha ok désolé j'avais mal compris!
A mon avis pour que ça change dynamiquement faudra passer par du JS, mais je suis loin d'être un pro là-dessus donc je préfère laisser à d'autres le soin de te répondre Smiley cligne
Ok j'ai fais un peu de JS du coup, j'ai une petite fonction qui se charge de donner la taille nécessaire aux composants, je l'appelle au chargement de la page puis à chaque fois que l'utilisateur redimensionne la page!
Ci-joint un JSFiddle avec ce que j'avais besoin de faire (et que j'ai réussi à faire du coup ^^)
Merci encore de ton temps et de ton aide!
Il y a peut-être une solution ici : un élément qui reste carré avec CSS (la solution 2).

L'idée est d'utiliser un padding en pourcentage, au lieu de margin. Et pour cela imbriquer deux DIV. Le parent aura ces styles :

#parent {
   height:0;
   width:25%;
   margin:30px auto;
   padding:2% 2% 25% 2%;
}

Modifié par Alainpre (20 Nov 2019 - 09:05)
Bonsoir. Un exemple ici : Scriptura ratio

Exemple du code pour le carré (avec la classe ".ratio", que l'on peut remplacer par l'ID de la div enfant ciblée) :
:root [class^="ratio"] {
    width: 100%;
    height: 0;
    margin: 0;
    padding-bottom: 100%;
}


Si l'on veut définir une largeur maximum au carré il faut lui ajouter un max-width (avec la valeur de la mal nommée --parentHeight).
Modifié par Olivier C (20 Nov 2019 - 17:23)
Modérateur
On peut aussi jouer avec writing-mode et pseudo pour se servir de la hauteur du parent devenu largeur comme référence : https://codepen.io/gc-nomade/pen/dyyrMRb

#parent {
  display: flex; 
  height:40vh;
  min-height: 0;/* !! necessaire */
  border: solid; 
}
#child {
  background: green;
  writing-mode: vertical-lr;
}
#child:before {
  content: "";
  padding: 50%;
  display: inline-block;
}


sans hauteur précisée, ça casse, et l'alternative sur le pseudo aussi
Modérateur
gcyrillus a écrit :
On peut aussi jouer avec writing-mode et pseudo pour se servir de la hauteur du parent devenu largeur comme référence


Intéressant, ça permet de reporter la technique du padding sur la verticalité.

Il y a en discussion, dans le groupe css-size-4, la proposition d'ajouter une propriété aspect-ratio, qui permette à chaque element d'obtenir un ratio intrinsèque comme l'a une image. Mais c'est pas pour tout de suite.

Du coup j'ai imaginé une solution alternative sans js (mais avec du html superflu): utiliser une balise svg avec une viewbox, qui a ces propriétés sans devoir faire une requête http inutile (on pourrait le faire avec une image transparente d'un pixel):

https://jsfiddle.net/b0w8x3e5/
Sujet clos
Aller à