11484 sujets

JavaScript, DOM et API Web HTML5

Hauteur de boîte à recalculer en redimensionnant la fenêtre

Bonjour,

Dans une page responsive, donc pas de hauteur en pixels, 4 boites, dans 3 d'entre elles des images, dans l'autre un couleur d'arrière plan et du texte.

Comment faire pour que celle-ci ait toujours la même hauteur que celles qui ont des images s'daptant à la taille de l'écran

En fait je voudrais faire comme
https://www.experiencetravel.nl/
(ligne de boites avant le footer)

Je saurais calculer la hauteur de ma boîte, mais pas en redimensionnant la fenêtre et ensuite, je ne saurais pas comment lui dire de suivre la hauteur qui change donc à chaque fois qu'on redimensionne la fenêtre.
J'ai vu sur le site mentionné que la hauteur était calculée.

Merci de votre aide

Bonne après-midi
Hello,

Sur la page experiencetravel.nl, en effet la hauteur de la div "bottom-set" est calculée dans le script bundles/js, un pourcentage de la largeur du viewport semble t il, le code n'est pas évident à lire, et ensuite les 4 éléments sont définis par :

.bottom-set>.wrapper>div {
    float: left;
    width: 25%;
    height: 100%;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
    box-sizing: border-box;
}


La hauteur des 4 blocs égale 100% de la hauteur du conteneur "bottom-set", qu'ils contiennent une image en background ou bien du texte,

Donc il faut implémenter un peu de javascript pour changer la hauteur du conteneur principal en fonction de la largeur de la fenêtre à chaque redimensionnement de la page

<script type="text/javascript" src="js/jquery.min.js"></script> 
<script>
$(window).resize(function() {
	var largeur_fenetre = $(window).width();
	var hauteur_conteneur = Math.ceil(largeur_fenetre * .20) ;
	$(".conteneur").height(hauteur_conteneur);
});
</script>


Tout fonctionne bien sur une page de test, c'est le résultat attendu ?
mcb a écrit :
Dans une page responsive, donc pas de hauteur en pixels

L'un n'implique pas l'autre... On peut très bien avoir des dimensions en pixel et avoir une page responsive.

Je n'ai pas exactement saisi ce que tu cherches à faire mais s'il s'agit d'avoir tout le temps des carrés, tu peux te baser sur la propriété padding en utilisant des pourcentages comme unité et en combinant avec un positionnement absolue.

Quand on utilise un padding avec des pourcentages, la valeur est toujours calculée en fonction de la largeur du parent. Si tes quatre éléments ont une largeur de 25%, appliquer un padding-bottom : 25% te donnera donc un carré.
Tu ajoutes ensuite un conteneur en position : absolute comme enfant pour englober les éléments à insérer.

Voici un exemple simple.

Tu devras bien évidemment travailler la partie responsive et gérer la largeur minimale.

Si tu veux juste avoir des hauteurs toujours égales, il suffit d'appliquer un height: 100% aux éléments enfants si la hauteur de parent est explicite, si non tu peux passer par un positionnement en flex ou tabulaire.

Dans tous les cas, javascript n'a pas grand chose à faire ici...
Bonjour

Très astucieux cette solution, je n'y aurais vraiment pas pensé.

Mes images sont dans le HTML pas en background, et j'ai un autre élément qui apparaît au survol, mais ça ne fait que rajouter de l'absolu dans l'absolu Smiley cligne

Ce qui me gênait était que le parent n'a pas de hauteur explicite.
et je me suis mal exprimée dans le titre (difficile de mettre un titre explicite parfois !)
Oui bien sûr c'est possible de mettre des valeurs en pixels sur un site responsive.

Je n'ai pas encore testé la solution en javascript (manque de temps aujourd'hui ...), mais elle m’intéresse, dans l'absolu pour d'autres cas.

Un grand merci donc à vous deux et une très belle journée
farang a écrit :
Mille excuses pour ma solution loufoque !

Smiley biggrin Je n'irais pas jusqu'à dire ça Smiley smile

mcb a écrit :
Mes images sont dans le HTML pas en background, et j'ai un autre élément qui apparaît au survol, mais ça ne fait que rajouter de l'absolu dans l'absolu

Je ne vois pas trop où est le problème. Si tu as des bonnes bases en positionnement CSS, ça ne changera pas grand chose.
Ça ne change pas grand chose non plus que tes images soient des éléments HTML...

Cela dit, à toi de voir ce qui te convient le mieux.
Bonsoir

Mais je n'ai pas dit qu'il y avait un problème.

Tout est parfait et merci encore !
Sujet clos
Aller à