11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] L'élément le plus grand de ma page

Bonjour,

Existe t-il un moyen de simple de récupérer l'id de l'élément qui possède la propriété height la plus grande de ma page web ?

Merci Smiley smile
Hello.

C'est possible en JS pur via le contenu de la propriété style de chaque élément, ou avec la méthode .outerHeight() de jQuery ; par contre ça va demander d'itérer sur tous les éléments de la page, ce qui va juste massacrer les perfs?

Pour quelle raison as-tu besoin de connaitre cette info (je pressens une histoire de colonne égale) ?
J'ai une page centrer sur l'écran, sur le schéma c'est en noir: (on voit pas très biens le fond belge..)

upload/45777-Sanstitre.png

le contour de la page doit rester belge, et si le contenu augmente, la page doit s'allonger d'un fond noir
Difficile a estimer sans voir le background en question mais tu peux selon le motif :

- Le modifier légèrement pour le rendre répétable.
- Rajouter une couleur de fond en plus de ton background-image.

Tu n'as pas une page en ligne illustrant ton souci?
J'ai rien en ligne désolé Smiley decu

j'ai essayé la propriété scroll du background ou le remplissage de la couleur de fond ça ne fonctionne pas comme je veux..

En revanche, l'idéal serait d'augmenter le height de la div, en fonction de son élément fils le plus grand pour la propriété height
Peux tu poster juste la partie du code HTML et CSS illustrant le problème? JS n'est pas l'outil adapté pour faire ça.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Voiture</title>
<link href="/_css/style.css" rel="stylesheet" type="text/css"
	media="all" />


</head>

<body>
 <div id="containerDiv">
<section> 
<article><p> blablabla...................</p></article>
<article><p> blablabla...................</p></article>
<article><p> blablabla...................</p></article>
</section>

</div>

</body>
</html>


#containerDiv{ 
position:relative;  
margin: 0 auto; 
height:1200px; 
width:1024px;
background:url(/img/bg_home.jpg) top center no-repeat #ffffff;}

body{background:gray; height:100%;}


Mais actuellement ça marche pas, au dela de 1200px, l'espace restant est remplie du du background gris du body
Modifié par Vico41 (16 Aug 2012 - 14:19)
C'est somme toute assez logique, vu que tu as mis un height: 1200px (qui je suppose correspond à la taille de ton image de background).

Un min-height serait plus approprié.
ça ne change rien Smiley ohwell

J'ai la section qui est position en absolute, avec height:auto; je regarde si ça peut venir de la le soucis
Le height:auto ne sert à rien sur un container en absolute. Et du peu d'éléments que tu nous donnes, je ne pense pas que ton position: absolute serve à quelque chose non plus.
Oui je l'admet mais Ya trop de code pour que je mette tout ici mais je vois que deux solutions la:

Mettre la section avec un width:100%; avec un background white;

ou récupérer la hauteur de la section en javascript avec:
document.getElementById("sectionID").offsetHeight;

puis changer le height du contenaireDiv en fonction de la section, en gardant un min height Smiley smile

j'essaye si ça marche, je mettrais problème résolue Smiley cligne
3 lignes de codes en JavaScript et le problème est résolue x)
je suis sur qu'à la base le problème doit être tout bête, mais je ne vois pas sur le coup :O

Merci à toi Florian_R pour ton aide Smiley smile
J'ai l'impression que ton CSS est démesurément compliqué pour ce que tu veux faire. Vu que tu ne peux nous poster une page en ligne, je ne peux juste que te conseiller de lire ou relire le Guide de survie du positionnement CSS, quitte à repartir de zéro sur des bases saines.

Bonne chance (et oublie la solution JS, c'est vraiment sale, mauvais en perf, pas maintenable et pas du tout robuste).
Sujet clos
Aller à