11548 sujets

JavaScript, DOM et API Web HTML5

Probleme de redimensionnement de div en javascript

Bonjour,

je tente de redimensionner des blocs div en fonction de la taille de la fenetre du navigateur.

Un peu de javascript et c'est ok sous IE7, Firefox et Opéra mais alors sous IE6 ça plante le navigateur.

Alors au chargement pas de probleme ça dimensionne bien mes div mais c'est au resize de la fenetre que ça plante IE6. J'ai mis ma fonction de redimensionnement sur un evenement window.onresize et ça marche pas

Voici l'exemple http://www.clipbooster.com/beta/compte2.php
Slt,

je pense que ca serait pas plus simple de passer par du CSS. Avec l'attribut margin, ca doit etre faisable je pense.

J'ai fais ca vite fais, ca marche pas tout a fais, mais dans l'idée c'est ca. T'as plus qu'a attendre qu'un pro du CSS passe par le pour modifier ca!

<style>
body{
	margin:0px;
}
#div1{
	border: 1px solid black;
	width: 200px;
	margin-top : 10px;
	margin-bottom : 10px;
	margin-left : 10px;

}
#div2{
	border: 1px solid black;
	margin-top : 35px;
	margin-bottom : 10px;
	margin-left : 220px;
	margin-right : 20px;
}

</style>

<div id="div1">Elements envoyés</div>
<div id="div2">Accès reservé</div>


En esperant que je t'ai un peu aidé!


+++
Merci

Mais en fait mon gros probleme c'est surtout pour la hauteur et là j'avoue que en css je vois pas vraiment comment m'y prendre...

Donc effectivement si un pro du css avait une solution elle serait carement la bienvenue.
ahh, je savais bien que c'était possible en CSS!

Je viens de repenser a ca, et j'ai trouvé la solution:
<style>
body{
	margin:0px;
}
#div1{
	border: 1px solid black;
	position: absolute;
	width: 200px;
	bottom: 10px;
	left: 10px;
	top: 10px;
}
#div2{
	border: 1px solid black;
	position: absolute;
	top: 35px;
	bottom: 10px;
	left: 220px;
	right: 20px;
}

</style>

<div id="div1">Elements envoyés</div>
<div id="div2">Accès reservé</div>



+++
Alors j'ai trouvé une solution pour que ça tourne sous IE6.

Utiliser les expression dans le css. Ca semble à peu pret fonctionner et ça donne ça :

<style>
html,body{
	margin:0px;
	height: 100%;
}
#div1{
	border: 1px solid black;
	position: absolute;
	width: 200px;
	bottom: 10px;
	left: 10px;
	top: 10px;
}
#div2{
	border: 1px solid black;
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 220px;
	right: 20px;
}

#div2 { /* ie6 hack */
	width: expression(document.body.offsetWidth - 230);
	height: expression(document.body.offsetHeight - 133);
}

</style>

<div id="div1">Elements envoyés</div>
<div id="div2">Accès reservé</div>


Bon là le positionnement est fait pour mon appli à moi donc à voir selon le résultat recherché évidement...

En tout cas merci beaucoup Maxroucool
Sujet clos
Aller à