problème entre height:100% et index.php?p=2

bibips
Les bases HTML/CSS

Bonjour,

Je fais appel à votre aide pour le problème suivant :
La taille d'un des éléments (une image répéter en y) de mon site, possède une hauteur de 100% pour pouvoir s'adapter à la hauteur du contenu du site (voir image).
Le problème se situe sur la page d'accueil, ça fonctionne plutôt bien sur index.php?p=1 mais dès lors que je me rends sur index.php?p=2 la hauteur (pourtant de 100%) de l'élément garde celle de la page index.php?p=1. Le soucis c'est que la hauteur de cet élément dépend de la hauteur du contenu or la hauteur du contenu est différente en fonction de la page sur laquelle je me trouve

L'élément en question est en vert !

#element{width:120px; height:100%; background: url(../images/element.jpg) repeat-y; position:absolute; margin-left: 840px; z-index:10; float:right;}
/* Voici le css de l'élement en question*/

Pensez vous que la solution peut se résoudre en CSS ? Et comment ? Ou alors il y a t'il une solution en javascript (mais je suis vraiment inexpérimenté en javascript) ?

6 réponses

Grafikart
Réponse acceptée

Réponse à la con : Pourquoi ne pas mettre le fond vert comme fond du bloc jaune ?

marrtin

Salut bibips !
Que contient comme information cette éléments en vert ?
Après pour ma part je ne définis jamais sur mon CSS une largeur en pixel et une hauteur en pourcentage. C'est une question de choix personnelle, je ne sais pas si c'est exact ou non.
Ensuite pourquoi pas définir seulement une hauteur minimal :

min-height: ???px;
bibips
Auteur

Bonjour ZiOu et merci de m'avoir répondu !
Alors pour le fameux élément en vert c'est en fait une image répéter verticalement.
J'ai essayé avec min-height mais le problème reste présent !

J'ai relus mon premier post et je l'ai trouver un peu longue ma question... Je vais résumer :
Comment est-il possible en css (ou javscript) de faire en sorte que l’élément vert, qui est une image en répétition en y, possède la même hauteur que l'élément en jaune dont la hauteur est variable ??!
Remarque : si vous voyez une solution en css ce serait bien car je suis novice en javascript :(

bibips
Auteur

Bonsoir, à force de recherche j'ai trouver comment faire pour récupérer la hauteur d'un élément pour ensuite donner cette même hauteur à un autre élément et tout ça en javascript !!! (C'est pas rien vu mon niveau dans ce domaine ! ) Seulement voilà le code ne fonctionne pas ! Pouvez-vous m'indiquer mes erreurs s'il vous plait :)

var hauteur = document.getElementById('contain').offsetHeight;
    var obj = document.getElementById('arbre');
    obj.style.height = "hauteur";
bibips
Auteur

why not en effet !!
Je vais tester ça demain et je vous tiendrais au courant

bibips
Auteur

Eureka ! Merci de ta réponse mon soucis est résolue