1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Problème CSS

pcmanprogrammeur
Messages postés
126
Date d'inscription
dimanche 27 mars 2005
Statut
Membre
Dernière intervention
16 octobre 2010
 - 3 juil. 2007 à 11:16
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
 - 3 juil. 2007 à 19:25
Bonjour !!!
J'ai un problème en CSS. Voici mon code :

<html>
<style>
#contenu{
 width:680px;
 height:560px;
 margin-top:0px;
 margin-left:0px;
 overflow:auto;
 float:left;
 position:relative;
 background-color:yellow;
}
#masquage
{
 height:100%;
 width:95%;
 height:100%;
 position:absolute;
 float:left;
 z-index:2;
 background-color:red;
}
</style>
</head>

test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test
test

</html>

Le problème est que je souhaite que ma div "masquage" prenne toute la hauteur mais je n'y arrive pas !!!
Merci de votre aide !!!
A bientôt.

1 réponse

Réponse 1 / 1
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
 17
3 juil. 2007 à 19:25
B
onjour...
La déclaration de style telle que tu l'as faite fait que le DIV masquage prend 100% de la fenêtre visible du DIV contenu.

Je ne sais si il y a un moyen avec CSS de contourner ce problème, mais il en existe un en javascript.

Une fois le document chargé il faut redimensionner le DIV masquage à la vrai hauteur du DIV contenu.

Voici un petit script complet qui permet de réaliser cela

<html>
<style type= "text/css">
#contenu {
  width : 680px;
  height : 560px;
  margin-top : 0px;
  margin-left : 0px;
  overflow : auto;
  float : left;
  position : relative;
  background-color : yellow;
}
#masquage {
  margin : 0px;
  height : 1px;
  width : 95%;
  position : absolute;
  top : 0px;
  float : left;
  z-index : 2;
  background-color : red;
}
</style>
<script type="text/javascript" language="JavaScript">
//--------------------
function Ajuste_Haut(){
  //-- Recup les Objets
  var Obj_1  = document.getElementById( "contenu");
  var Obj_2  = document.getElementById( "masquage");
  //-- Lecture des Hauteurs
  var Haut_1 = Obj_1.offsetHeight;
  var Haut_2 = Obj_2.offsetHeight;
  //-- Si partie overflow conteneur
  if( Obj_1.scrollHeight > Haut_1)
    Haut_1 = Obj_1.scrollHeight;
  //-- Ajuste hauteur contenu
  Obj_2.style.height = Haut_1 +"px";
}
//---------------------------------------------
function Add_Event( obj_, event_, func_, mode_){
  if( obj_.addEventListener)
    obj_.addEventListener( event_, func_, mode_? mode_:false);
  else
    obj_.attachEvent( 'on'+event_, func_);
}
// ======================================
//-- On ajoute levenement sur le onload de window
Add_Event( window, 'load', Ajuste_Haut);

</script>
</head>



 






  <script type="text/javascript" language="JavaScript">
    for( i=0; i <100; i++) document.write( "test " +i +"
");
  </script>

</html>

S'il y a besoin d'explication complémentaire...




;0)
0