[Résolu] Une hauteur de div à 100%

Bonjour,
De retour déjà... désolé
Je suis parti de cette démo :
https://tympanus.net/Blueprints/OnScrollEffectLayout/
et je tente de remplacer une image par un ensemble de div.
Seulement, je n'arrive pas à donner une hauteur de 100% à cette div dont voici le HTML :

<figure class="cbp-so-side cbp-so-side-left">
<div id= "chien"><div class="title">Titre</div>
<div class="rond">
<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div>
</figure>

et les CSS :

#chien {
	width: 100%;
	height: 50px;
	background-color: red;
}
#chien img{
	width: 150px;
}

@keyframes circle {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(8)
    }
}
.circle {
	margin: 0 auto;
	width: 300px;
	height: 300%;
	border: 10px solid #000000;
	border-radius: 50%;
	position: absolute;
	top: 15%;
	left: 60%;
	overflow-y: hidden;
}
.fond{
	width: 100%;
	height: 100%;
	overflow-y: hidden;
}
.title{
	width: 100%;
	height: 100%;
	color: #EC990D;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	font-style: normal;
	font-weight: bolder;
	font-size: 10em;
	z-index: 999999;
	position: absolute;
	top: 0px;
	left: 0px;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.one {
  animation: circle 4s infinite linear;
}
.two {
  animation: circle 3s infinite linear;
}
.three {
  animation: circle 2s infinite linear;
}
.rond{
	width: 100%;
	height: 100%;
	position: absolute;
	overflow-y: hidden;
}

J'ai tenté de mettre les parents à height: 100%, mais cela ne change rien
Problème récurrent, je sais
Merci,
D.

Bonjour,

Avant tout, il y a plein d'erreurs dans le HTML :
- plusieurs div ne sont pas fermées,
- en l'absence d'images, la balise figure n'a plus lieu d'être.

Ensuite :
- height: 100% veut dire 100% de la hauteur de l'élément
- pour avoir un élément faisant 100% de la hauteur de la fenêtre du navigateur il faut utiliser les unités "vh".

Exemple :

.monElement {
  height: 100vh;
}

Bonjour Olivier C,
Merci pour ta réponse.
Malheureusement je suis obligé de garder le <figure> pour sa classe (cbp-so-side cbp-so-side-left)

<figure class="cbp-so-side cbp-so-side-left">
<div id= "chien"><div class="title">bolo</div>
<div class="rond">
<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div></div>
</figure>

Pour ce qui est de la hauteur, je souhaiterais celle de l'élément, et non un vh.
Pour le moment, seule l'unité px fonctionne.
Merci beaucoup Olivier,
P.

PLGPPUR a écrit :
Malheureusement je suis obligé de garder le &lt;figure&gt; pour sa classe (cbp-so-side cbp-so-side-left)

Et bien dans ce cas vous mettez une div... et il manque toujours la fermeture d'un élément. Serait-ce ceci qui est recherché ? :

<!-- avec de l'indentation on s'en sort tout de suite mieux -->
<div class="cbp-so-side cbp-so-side-left">
  <div id="chien">
    <div class="title">bolo</div>
    <div class="rond">
      <div class="circle one"></div>
      <div class="circle two"></div>
      <div class="circle three"></div>
    </div>
  </div>
</div>

Et si oui : qu'est-ce qui doit faire 100% de haut (#chien) ? et par rapport à quoi ? l'élément parent (.cbp-so-side) ?
Modifié par Olivier C (19 Aug 2022 - 19:25)

Merci pour les corrections Olivier C

a écrit :
Et si oui : qu'est-ce qui doit faire 100% de haut (#chien) ? et par rapport à quoi ? l'élément parent (.cbp-so-side) ?

Oui, mais je ne sais pas si cela est possible, d'où la publication de la démo.
#chien remplace une image...
C'est se compliquer la vie, mais si il n'y avait pas des gens sympas comme vous, je ne le ferais pas
Bon week-end,
P.
Modifié par PLGPPUR (19 Aug 2022 - 20:03)

De rien

Bon alors si #chien remplace l'image, on ne va pas faire comme ça, on va mettre directement l'image sur la div parente et on donnera un ratio à cette div :

<div id="chien" class="cbp-so-side cbp-so-side-left">
  <div class="title">bolo</div>
  <div class="rond">
    <div class="circle one"></div>
    <div class="circle two"></div>
    <div class="circle three"></div>
  </div>
</div>

#chien {
  max-width: 20em;
  background-image: url("https://images.com/maPhoto.jpg");
  background-size: cover;
  aspect-ratio: 16/9;
}

Exemple en ligne : CodePen

Merci Olivier pour ton aide et ton CodePen, mais mon cas est vraiment compliqué. J'ai testé pas mal de choses depuis ton post, essayant de partir de tes CSS/HTML
L'idée est que le background soit cela (height: 100%) :

<head>
<style>
* {
	margin: 0;
	overflow-x: hidden;
}
body {
	background-color: #FFFFFF;
}
@keyframes circle {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(8)
    }
}
.circle {
	margin: 0 auto;
	width: 300px;
	height: 300px;
	border: 10px solid #000000;
	border-radius: 50%;
	position: absolute;
	top: 15%;
	left: 60%;
	overflow-y: hidden;
}
.fond{
	width: 100%;
	height: 100%;
	overflow-y: hidden;
}
.title{
	width: 100%;
	height: 100%;
	color: #EC990D;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	font-style: normal;
	font-weight: bolder;
	font-size: 10em;
	z-index: 999999;
	position: absolute;
	top: 0px;
	left: 0px;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.one {
  animation: circle 4s infinite linear;
}
.two {
  animation: circle 3s infinite linear;
}
.three {
  animation: circle 2s infinite linear;
}
.rond{
	width: 100%;
	height: 100%;
	position: absolute;
	overflow-y: hidden;
}
</style>
<body>
<div class="title">bolo</div>

<div class="rond">
<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div>

<body>

et le chien vient dessus, en premier plan dans la div.
J'ai testé les z-index (en retirant le background)... testé bcp de choses
Bonne soirée,
P.

Bonjour Olivier,
Oui, une image du résultat attendu est la meilleure des choses à faire
Bon week-end,
P.

En mettant un fond blanc à width et height 100%, on obtient la taille désirée
Par contre, impossible de faire passer le chien en premier plan (devant les circles).

			<div class="cbp-so-section">
<div class="cbp-so-side cbp-so-side-left">
    <div class="title">bolo</div>

				  <div id= "chien"><img class="" src="fond_blanc.jpg" alt="moi">

    <div class="rond">
      <div class="circle one"></div>
      <div class="circle two"></div>
      <div class="circle three"></div>
	  <div class="chien"><img src="./imgs/chien.jpg" alt="img03"></div>


    </div>
  </div>
	</div>

Tant mieux si tu y es arrivé ! C'est laborieux, mais c'est bien de tâtonner aussi, on apprend beaucoup ainsi.

PLGPPUR a écrit :
Pour ce qui est de la hauteur de la div, un background ne fonctionnait pas, j'ai donc triché en mettant une image blanche pour faire office de fond, et conserver la hauteur initiale.

Je comprends que tu ne veuilles pas revenir sur ton code si le résultat attendu est atteint sur le plan visuel, mais à l'avenir, pour ce genre de problème, penche toi sur la propriété css aspect-ratio
Modifié par Olivier C (21 Aug 2022 - 09:30)

Merci beaucoup Olivier, je vais m'y pencher.
Une aide pour le centrage verticale du chien ?
Pour comprendre, même si j'ai trouvé une solution.
Et une réponse à mon problème de font (précédente discussion) ?

a écrit :
Pour comprendre, même si j'ai trouvé une solution.

Je profite de ta gentillesse
Bonne soirée et MERCI !
P.

PLGPPUR a écrit :
Merci beaucoup Olivier, je vais m'y pencher.
Une aide pour le centrage verticale du chien ?
Pour comprendre, même si j'ai trouvé une solution.

L'image dans la boite est un élément et se comporte donc comme un élément. Du coup ta solution en regard de ce problème est ok, bien que cette solution ne soit pas la plus propre, car on bouge l’élément pour arriver à nos fins. Peut-être aurait-il fallut utiliser cette règle sur l'image :

object-fit: cover;

Si un background-image avait été utilisé l'élément n'aurait pas bougé, on le laisse calé comme il est prévu, et on aurait bougé le background au sein de l'élément avec des règles css qui lui sont dédiés.

Deux manières de faire donc, il n'y en n'a pas une meilleure que l'autre : tout dépend du contexte. En principe, les images représentent un contenu (référencable), les background-image sont plutôt dédiés à la décoration du site.

Merci beaucoup
Bon dimanche Olivier.