IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Hauteur de div automatique selon la copie d'écran proposée


Sujet :

JavaScript

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Août 2008
    Messages
    66
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 66
    Par défaut Hauteur de div automatique selon la copie d'écran proposée
    Bonjour,
    j'ai posté la même question dans CSS,
    mais peut-être que la solution est du côté javascript ...

    selon la copie d'écran suivante :

    Je voudrais que la div qui est entourée d'un liseret rouge soit taillée automatiquement à l'espace restant (elle a pour le moment une hauteur fixe)
    et que sont ascenseur vertical s'allume si nécessaire.

    Là, on voit qu'il reste de l'espace libre, blanc, avant le bas du navigateur.

    Les div qui sont avant la dernière div (entourée d'un liseret rouge) n'ont pas de hauteur connue.
    =>Leur hauteur augmente en fonction du contenu, lignes de boutons ou lignes de champs de formulaire (le formulaire bleu).

    quelqu'un saurait-il me donner le code javascript permettant de connaitre l'espace libre sous la div (div_boutons_resultat) qui contient "modifier supprimer interlocuteurs actions commerciales"

    ce qui me permettrait de coder la hauteur de la dernière div "en live"

    merci de me donner tout le nécessaire :


    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    html {
    height				: 100%;
    }
     
    body {
    height				: 100%;
    margin: 0;
    padding: 0;
    }
     
    #div_generale { /* celle qui englobe toute la page */
    background-color : burlywood; /* marron clair */
    /* code ... si nécessaire ... */
    }
     
    #div_ajouter_rechercher { /* zone bleu-clair */
    background-color : lightblue;
    /* code ... si nécessaire ... */
    }
     
    #div_boutons_resultat { /* boutons dans la zone vert-clair */
    background-color : lightgreen;
    /* code ... si nécessaire ... */
    }
     
    #div_resultat { /* div contenant la liste des enregistrements trouvés */
    background-color : lightgreen;
    overflow-y : auto;
    /* code ... si nécessaire ... */
    }
    JAVASCRIPT :
    ?!?!?! là je sais pas ce qu'il faut mettre ?!?!?!

    HTML :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <html>
     
      <head>
      <!-- appel du CSS et du code javascript -->
      </head>
     
      <body>
     
        <div id="div_generale">
     
          <div id="div_ajouter_rechercher">
          </div>
     
          <div id="div_boutons_resultat">
          </div>
     
          <div id="div_resultat" height="exécution du code javascript">
          </div>
     
        </div>
     
      </body>
      </html>


    mille merci pour votre aide !
    Nils.

    (je vois que quelqu'un est passé par là pour ajouter quelques balises, merci !)
    Images attachées Images attachées  

  2. #2
    Membre Expert Avatar de Willpower
    Homme Profil pro
    sans emploi
    Inscrit en
    Décembre 2010
    Messages
    1 009
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : sans emploi

    Informations forums :
    Inscription : Décembre 2010
    Messages : 1 009
    Par défaut
    en css un truc du genre :


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    height:auto;
    top:0;
    (ou alors un heigh : 100% ??)

    sinon tu devras p-ê aussi jouer avec les "position:relative" ou "position:absolute" et éventuellement repositionner le "top".


    et comme dis sur le sujet css, vérifie que tes éléments conteneur aient déjà un height de 100%.

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Août 2008
    Messages
    66
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 66
    Par défaut
    je viens de corriger ma question,
    j'ai bien dans le CSS un html et un body à 100%

    par contre je ne comprends pas bien ta proposition
    peux-tu détailler un peu plus ?

    éventuellement, tu peux faire un copier/coller du code proposé dans la question et y ajouter ton idée ...

    merci pour ton aide

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Citation Envoyé par nilsb13
    j'ai bien dans le CSS un html et un body à 100%
    Ca n'a aucun sens
    En CSS, les hauteurs en pourcentage correspondent à un rapport par rapport à l'élément conteneur, mais les balises <html> et <body> n'ont pas de conteneur à partir desquels définir ce pourcentage.
    C'est un peu comme si, au supermarché, les prix étaient annoncés comme "Prix : 90%". C'est joli, mais 90% de quoi ?

    Dans ton cas, il faut récupérer la taille de la fenêtre, la taille des différents éléments affichés (et les additionner) puis affecter à la dernière div la différence entre les deux.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Août 2008
    Messages
    66
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 66
    Par défaut
    Merci Bovino pour ton éclaircicement très clair !

    ok, je supprime les 100% qui ne servent à rien !

    quelqu'un sait coder en JS ce que Bovino propose :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    1) Récupérer la hauteur de la fenêtre
    $hauteur_fenêtre = code_javascript_qui_trouve_la_hauteur_de_la_fenêtre;
     
    2) Récupérer la hauteur des différents éléments affichés
    $hauteur_div_menu = code_javascript_qui_trouve_la_hauteur_de_la_div_menu;
    $hauteur_div_ajouter_rechercher = code_javascript_qui_trouve_la_hauteur_de_la_div_ajouter_rechercher;
    $hauteur_div_boutons_résultat = code_javascript_qui_trouve_la_hauteur_de_la_div_boutons_résultat;
     
    3) Additionner la hauteur des différents éléments affichés
    $hauteur_divs_sans_scroll = $hauteur_div_menu + $hauteur_div_ajouter_rechercher + $hauteur_div_boutons_résultat
     
    4) Soustraire la hauteur des éléments à la hauteur de la fenêtre
    $hauteur_restante = $hauteur_fenêtre - $hauteur_divs_sans_scroll;
     
    4) Affecter à la dernière div la différence entre les deux.
    $hauteur_div_avec_scroll = $hauteur_restante
     
    5) affecter cette valeur dans le CSS
    #div_resultat {
    height : codeJS[$hauteur_div_avec_scroll]px; /* ou % ? */
    background-color : lightgreen;
    overflow-y : auto;
    }
    merci,
    car je n'y connais vraiment rien en JS,
    je sais, c'est une tare !!!, mais bon, pas encore eu le courage de m'y attaquer !

  6. #6
    Membre confirmé
    Profil pro
    Inscrit en
    Août 2008
    Messages
    66
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 66
    Par défaut
    En CSS, les hauteurs en pourcentage correspondent à un rapport par rapport à l'élément conteneur, mais les balises <html> et <body> n'ont pas de conteneur à partir desquels définir ce pourcentage.
    donc, si je comprends bien :
    la fenêtre du navigateur n'est pas le conteneur principal,
    c'est bien <html> qui est le conteneur principal donc (?)

    dans ce cas, <body>, contenu dans <html>, peut-il être à 100% ?

  7. #7
    Membre Expert Avatar de Willpower
    Homme Profil pro
    sans emploi
    Inscrit en
    Décembre 2010
    Messages
    1 009
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : sans emploi

    Informations forums :
    Inscription : Décembre 2010
    Messages : 1 009
    Par défaut
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    	body {
    		margin: 0;
    		padding: 0;
    	}
    	#div_generale {
    		background-color : burlywood; 
    		height:100%;
    	}
    	#div_ajouter_rechercher { 
    		background-color : lightblue;
    		height:150px;
    	}
    	#div_boutons_resultat { 
    		background-color : green;
    		height:100px;
    	}
    	#div_resultat { 
    		background-color : lightgreen;
    		overflow-y : auto;
    		position:absolute;
    		width:100%;
    		height:auto;
    		top:250px; /* somme des heights de "div_ajouter_rechercher" et de "div_boutons_resultat" */
    		bottom:0;
    	}

  8. #8
    Membre confirmé
    Profil pro
    Inscrit en
    Août 2008
    Messages
    66
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 66
    Par défaut
    Bovino, si tu passes par là ...
    ou quelqu'un d'autre !

    j'ai pondu le code suivant (mon premier code JS !!!),

    mais :
    - le alert("zz" ...) ne s'allume pas et empèche l'allumage de tous les autres, même ceux qui sont avant (je l'ai mis en //)

    - le alert("hauteur_div_menu : " + hauteur_div_menu); ne s'allume pas davantage !

    bref, j'ai la hauteur de la fenêtre,
    mais pas la hauteur de ma première div !(?)

    quelqu'un pour aider ?

    Bovino => nota, par rapport à ce que tu m'as dit tout à l'heure :
    si html { } => document.documentElement.offsetHeight : 0
    si html { height : 100%; } => document.documentElement.offsetHeight : 888
    (pour body, le 100% ne change rien)

    CSS :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    html {
    height : 100%;
    }
     
    body {
    background-color 	: burlywood;
    margin : 5px;
    padding :0px;
    }
     
    * {
    font-family : arial;
    font-size : 100%;
    }
     
    #div_menu_general { /* on a besoin de cette id simplement pour pouvoir calculer sa hauteur en JS */
    }
     
    #div_ajouter_rechercher {
    background-color : lightblue;
    }
     
    #div_boutons_resultat {
    background-color : lightgreen;
    }
     
    #div_resultat {
    background-color : lightgreen;
    overflow-y : scroll;
    }
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    <?php
    // -------------------------------------------------------------------------------------------------
    // fichiers à inclure systématiquement -------------------------------------------------------------
    // -------------------------------------------------------------------------------------------------
    include_once('../ressources/initialisation_systematique.php');
    // -------------------------------------------------------------------------------------------------
    // FIN - fichiers à inclure systématiquement -------------------------------------------------------
    // -------------------------------------------------------------------------------------------------
    ?>
    <!DOCTYPE html>
     
    <html>
     
    	<head>
    		<title>TEST 2</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
    		<link rel="stylesheet" type="text/css" media="screen" href="<?php echo BASE_URL; ?>ressources/styles_test.css" />
     
    		<!-- tailler la div div_resultat -->
    		<script type="text/javascript">
    		<!--
     
    		alert("début");
     
    		// 1) Récupérer la hauteur de la fenêtre
    		var hauteur_fenêtre = document.documentElement.offsetHeight;
    		alert("hauteur fenêtre : " + hauteur_fenêtre); // ok
    		alert("document.documentElement.offsetHeight : " + document.documentElement.offsetHeight); // ok
    		alert("window.innerHeight : " + window.innerHeight); // ok
     
    		//2) Récupérer la hauteur des différents éléments affichés
    		var hauteur_div_menu_general =	document.getElementById("div_menu_general").style.height;
    		alert("hauteur_div_menu_general : " + hauteur_div_menu); // NON ok !
     
    		//alert("zz" + document.getElementById("div_menu_general").style.height; // NON ok
     
    		var hauteur_div_ajouter_rechercher	= document.getElementById("div_ajouter_rechercher").style.height;
     
    		var hauteur_div_boutons_résultat	= document.getElementById("div_boutons_resulta").style.height;
     
    		//3) Additionner la hauteur des différents éléments affichés
    		var hauteur_divs_sans_scroll = hauteur_div_menu_general + hauteur_div_ajouter_rechercher + hauteur_div_boutons_résultat;
     
    		//4) Soustraire la hauteur des éléments à la hauteur de la fenêtre
    		var hauteur_restante = hauteur_fenêtre - hauteur_divs_sans_scroll;
     
    		//4) Affecter à la dernière div la différence entre les deux.
    		document.getElementById("div_resultat").style.height = hauteur_restante + "px";
     
    		-->
    		</script>
     
     
    	</head>
     
    <body>
     
    	<div id="div_menu_general">
    	menu général
    	</div>
     
    	<div id="div_ajouter_rechercher">
    	ajouter / rechercher<br>
    	formualaire<br>
    	boutons
    	</div>
     
    	<div id="div_boutons_resultat">
    	boutons résultat
    	</div>
     
    	<div id="div_resultat">
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	ceci est la zone de résultats<br>
    	</div>
     
    </body>
    </html>

  9. #9
    Membre confirmé
    Profil pro
    Inscrit en
    Août 2008
    Messages
    66
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 66
    Par défaut
    Willpower merci pour ton code,

    mais cela ne correspond pas à mon problème,

    les hauteurs de div ne sont pas fixées dans les CSS,
    elles varient avec leur contenu,
    je ne souhaite pas les fixer.

  10. #10
    Membre Expert Avatar de Willpower
    Homme Profil pro
    sans emploi
    Inscrit en
    Décembre 2010
    Messages
    1 009
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : sans emploi

    Informations forums :
    Inscription : Décembre 2010
    Messages : 1 009
    Par défaut
    Dans ce cas étant nul en CSS, je te propose ma solution JavaScript :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    <html>
    <head>
    	<style type=text/css >
    	body {
    		margin: 0;
    		padding: 0;
    	}
    	#div_generale {
    		background-color : burlywood; 
    		height:100%;
    	}
    	#div_ajouter_rechercher { 
    		background-color : lightblue;
    	}
    	#div_boutons_resultat { 
    		background-color : green;
    	}
    	#div_resultat { 
    		background-color : lightgreen;
    		overflow-y : auto;
    		bottom:0;
    		height:auto; 
    		width:100%;	
    	}
    	</style>
    </head>
    <body>
        <div id="div_generale">
    		<div id="div_ajouter_rechercher">div_ajouter_rechercher<br/>
    				<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>
    		</div>
    		<div id="div_boutons_resultat">div_boutons_resultat<br/>
    				<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>
    		</div>
    		<div id="div_resultat" height="exécution du code javascript">div_resultat<br/>
    			<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>
    			<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>
    			<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>dhg<br/>
    		</div>
        </div>
    	<script type=text/javascript>
    		var div = document.getElementById('div_resultat');
    		var saveTop = div.offsetTop;
    		with(div.style){
    			position = 'absolute';
    			top = saveTop;
    		}
    	</script>
    </body>
    </html>

  11. #11
    Membre confirmé
    Profil pro
    Inscrit en
    Août 2008
    Messages
    66
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 66
    Par défaut
    Willpower,

    j'ai copier/coller ton code,

    mais ça marche pas vraiment ???

    par contre,
    si tu as encore un peu de temps à me consacrer,
    pourrais tu vois pourquoi mon code JS ne fonctionne pas,
    au niveau du post "16/08/2011 20h36"

    merci !!!

  12. #12
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    mais ça marche pas vraiment ???
    Tu es aussi loquace qu'un message d'erreur de Windows !
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  13. #13
    Membre confirmé
    Profil pro
    Inscrit en
    Août 2008
    Messages
    66
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 66
    Par défaut
    LA SOLUTION EST ICI !

    Bon les gars et les filles,

    j'ai fini par trouver LA SOLUTION !!!!

    Tout d'abord,
    il faut savoir quelques petites choses au sujet de JS !

    Primo :
    => JS ne connait que le code HTML qui s'est déjà déroulé !!!
    Donc, en ayant placé mon code JS dans <head> ça risquait pas de marcher !, car mes div sont bien plus bas !
    => Il faut donc que le code JS (dans ce cas de figure) soit tout en bas de la page, pour que JS ait la connaissance des id des div !

    Secondo :
    Je vous invite vivement à travailler sous Firefox avec les outils web developer installés !
    => Sans ces outils, je n'ai pas pu comprendre que mes div n'étaient pas vues par JS !
    Ce n'est qu'une fois ces outils installés (ouvrir la console d'erreurs), que j'ai compris qu'il fallait mettre le code en bas de page.

    Bref.

    Une fois que vous avez compris ça,
    il faut faire la différence entre offsetHeight et style.height,
    le premier permet de lire la hauteur de l'objet concerné, le second permet d'affecter une valeur à la hauteur de l'objet concerné (grosse différence !!!).

    Et pour finir, quand on n'a jamais codé en JS, ben, c'est pas de la tarte !

    Bref, voici le code qui marche :

    CSS
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    html {
    height : 100%;
    }
     
    body {
    background-color 	: burlywood;
    margin : 5px;
    padding :0px;
    }
     
    * {
    font-family : arial;
    font-size : 100%;
    }
     
    #div_menu_general { /* on a besoin de cette id simplement pour pouvoir calculer la hauteur de la div en JS => il faut un id pour getElementById ! */
    }
     
    #div_ajouter_rechercher {
    background-color : lightblue;
    }
     
    #div_boutons_resultat {
    background-color : lightgreen;
    }
     
    #div_resultat {
    background-color : lightgreen;
    overflow-y : scroll;
    }
    HTML
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    <!DOCTYPE html>
     
    <html>
     
    	<head>
    		<title>TEST 2</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
    		<link rel="stylesheet" type="text/css" media="screen" href="styles_test2.css" />
    	</head>
     
    <body>
     
    	<div id="div_menu_general">
    	menu général
    	</div>
     
    	<div id="div_ajouter_rechercher">
    	ajouter / rechercher<br />
    	formualaire<br />
    	boutons
    	</div>
     
    	<div id="div_boutons_resultat">
    	boutons résultat
    	</div>
     
     
    	<div id="div_resultat">
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	ceci est la zone de résultats<br />
    	</div>
     
    		<!-- tailler la div div_resultat -->
    		<script type="text/javascript">
    		<!--
     
    		//alert('début');
     
    		// 1) Récupérer la hauteur de la fenêtre
    		var hauteur_fenêtre = document.documentElement.offsetHeight;
    		alert('hauteur fenêtre : ' + hauteur_fenêtre); // ok
    		//alert('document.documentElement.offsetHeight : ' + document.documentElement.offsetHeight); // ok
    		//alert('window.innerHeight : ' + window.innerHeight); // ok
     
    		//2) Récupérer la hauteur des différents éléments affichés
    		var hauteur_div_menu_general =	document.getElementById('div_menu_general').offsetHeight;
    		alert('hauteur_div_menu_general' + hauteur_div_menu_general);
     
    		var hauteur_div_ajouter_rechercher	= document.getElementById('div_ajouter_rechercher').offsetHeight;
    		alert('hauteur_div_ajouter_rechercher' + hauteur_div_ajouter_rechercher);
     
    		var hauteur_div_boutons_résultat	= document.getElementById('div_boutons_resultat').offsetHeight;
    		alert('hauteur_div_boutons_résultat' + hauteur_div_boutons_résultat);
     
    		//3) Additionner la hauteur des différents éléments affichés
    		var hauteur_divs_sans_scroll = hauteur_div_menu_general + hauteur_div_ajouter_rechercher + hauteur_div_boutons_résultat;
    		alert('hauteur_divs_sans_scroll' + hauteur_divs_sans_scroll);
     
    		//4) Soustraire la hauteur des éléments à la hauteur de la fenêtre
    		var hauteur_restante = hauteur_fenêtre - hauteur_divs_sans_scroll - 5 - 5 ; // moins 5 pixels en haut et en bas pour body { margin : 5px; }
    		alert('hauteur_restante' + hauteur_restante);
     
    		//5) Affecter à la dernière div la différence entre les deux.
    		document.getElementById('div_resultat').style.height = hauteur_restante + 'px';
     
    		-->
    		</script>
     
     
    </body>
    </html>
    Un grand merci à tous ceux qui mon aidé.

    En particulier à Bovino qui m'a mis sur la piste, en me donnant le déroulé du programme (très important !), je ne savais pas par quel bout attaquer JS !

    Je clos le sujet avec un majestueux RESOLU !!!

  14. #14
    Membre confirmé
    Profil pro
    Inscrit en
    Août 2008
    Messages
    66
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 66
    Par défaut
    Citation Envoyé par Bovino Voir le message
    Tu es aussi loquace qu'un message d'erreur de Windows !
    Ouarf ,
    tu as raison Bovino, j'ai été un peu feignant sur ce coup là !

    mais il y avait trop de choses à raconter, des trucs incohérents dans le code et la piste me semblait hasardeuse pour moi, car je ne comprennait pas tout dans le code, c'est pour ça que j'ai été bref.

    => height="exécution du code javascript / j'imagine qu'il fallait l'enlever ... ?

    => et ça, j'ai pas réussi à le comprendre :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    var div = document.getElementById('div_resultat');
    		var saveTop = div.offsetTop;
    		with(div.style){
    			position = 'absolute';
    			top = saveTop;
    surtout cette instruction : with(div.style)

    mais tu as vu Bovino,
    j'ai fait un beau post d'explication du code que j'ai réussi à faire fonctionner, pour me rattraper !!!

  15. #15
    Membre Expert Avatar de Willpower
    Homme Profil pro
    sans emploi
    Inscrit en
    Décembre 2010
    Messages
    1 009
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : sans emploi

    Informations forums :
    Inscription : Décembre 2010
    Messages : 1 009
    Par défaut
    Citation Envoyé par nilsb13 Voir le message
    Ouarf ,
    tu as raison Bovino, j'ai été un peu feignant sur ce coup là !

    mais il y avait trop de choses à raconter, des trucs incohérents dans le code et la piste me semblait hasardeuse pour moi, car je ne comprennait pas tout dans le code, c'est pour ça que j'ai été bref.

    => height="exécution du code javascript / j'imagine qu'il fallait l'enlever ... ?

    => et ça, j'ai pas réussi à le comprendre :
    var div = document.getElementById('div_resultat');
    var saveTop = div.offsetTop;
    with(div.style){
    position = 'absolute';
    top = saveTop;

    surtout cette instruction : with(div.style)

    mais tu as vu Bovino,
    j'ai fait un beau post d'explication du code que j'ai réussi à faire fonctionner, pour me rattraper !!!
    with ça sert juste pour ne pas réécrire "div.style." devant "position" et "top", en gros c'est pareil que :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    var div = document.getElementById('div_resultat');
    var saveTop = div.offsetTop;
    div.style.position = 'absolute';
    div.style.top = saveTop;
    mais bon, j'ai l'habitude d'utiliser "with" déjà que je chipote à un "obj.style" parce qu'en général je mets un bon paquet de css. disons qu'ici c'était plus un réflexe qu'autre chose. :-)

  16. #16
    Membre confirmé
    Profil pro
    Inscrit en
    Août 2008
    Messages
    66
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 66
    Par défaut
    Merci Willpower pour cet éclairage,
    comme je débute avec JS, ça faisait un peu beaucoup de nouveautés pour moi.

  17. #17
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    j'ai proposé une solution à un problème similaire ici.
    C'est en jquery et compatible IE8.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var A = $('#AA').height(); 	// hauteur du div "AA" (en px)
    -> height()

  18. #18
    Membre confirmé
    Profil pro
    Inscrit en
    Août 2008
    Messages
    66
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 66
    Par défaut
    Merci jreaux62 pour cette information supplémentaire,

    j'ai entendu parlé de JQuery, mais je n'ai pas encore osé l'utilisé, en me disant que je devrais d'abord savoir ce qu'était JS.

    Mais j'y viendrai peut-être uin jour ...

    saurais-tu me dire en quelques mots, ce que JQuery apporte de plus par rapport à JS ?

    Dans le même esprit, je sais maintenant programmer en PHP depuis quelques années, et pour mon dernier projet j'ai étudié CodeIgniter, ben, j'ai laissé tombé, impossible de caser ma programmation procédurale dans CI, car n'ayant pas étudié la POO à l'école, c'est un gros morceau à avaler maintenant.
    Je suis finalement plus efficace en PHP procédural qu'avec CI, et le développement de mon application avance, c'est le principal pour moi pour le moment.

    tien, je viens de voir que : src="http://code.jquery.com/jquery-1.6.2.min.js
    JQuery ne s'installe pas ?, il faut aller le pécher sur le net avec un lien ?
    (ou on peut aussi l'installer ?)
    (oui, je sais, je suis feignant aussi sur ce coup là, je pourrai aller voir la doc de JQuery !, c'est juste si tu as le temps de répondre, je ne compte pas l'utiliser pour le moment)

    Encore merci !

  19. #19
    Invité
    Invité(e)
    Par défaut
    Citation Envoyé par nilsb13 Voir le message
    saurais-tu me dire en quelques mots, ce que JQuery apporte de plus par rapport à JS ?
    Houlà ! il faudrait demander à un spécialiste !
    Ce que je constate, c'est qu'un tas de fonction javascript ne fonctionne pas correctement sur I.E.
    jquery est plus compatible (d'après ma petite expérience)
    Je suis finalement plus efficace en PHP procédural qu'avec CI
    Moi aussi ...
    JQuery ne s'installe pas ?, il faut aller le pécher sur le net avec un lien ?
    Il y a plusieurs façon d'"initialiser" jquery.
    L'avantage du lien vers le site de jquery permet d'avoir une version dont on est sûr qu'elle est stable et fonctionnelle.
    (et on n'a pas à télécharger de fichier en cas de nouvelle version)

  20. #20
    Membre confirmé
    Profil pro
    Inscrit en
    Août 2008
    Messages
    66
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 66
    Par défaut
    Super !
    merci pour tes réponses !!!

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 2 12 DernièreDernière

Discussions similaires

  1. hauteur de div automatique
    Par aFauchere dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 18/01/2012, 12h24
  2. Hauteur du div ne s'augmente pas selon le nombre des annonces
    Par simotaqi dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 02/04/2010, 23h19
  3. hauteur de div automatique en fonction de l'espace libre
    Par boutmos dans le forum Mise en page CSS
    Réponses: 18
    Dernier message: 30/12/2008, 14h36
  4. hauteur <div> automatique par rapport à un autre <div>
    Par arnaud_verlaine dans le forum Mise en page CSS
    Réponses: 11
    Dernier message: 08/05/2008, 19h38
  5. Problème de hauteur de div et pied de page
    Par Bishop dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 08/03/2005, 15h30

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo