Discussion :

[momofr]

Bonjour,

Voici mon problème :
Quel que soit le nombre de lignes à afficher dans une page, je veux que ma page fasse au minimum la hauteur de l'écran (qui est fonction de la taille de l'écran : 13'', 15'', 17'', 19'', etc).

Cela fonctionne presque avec Firefox, à ce seul détail près :
1) je veux que la partie texte de couleur blanche (div.prose) s'étende jusqu'au bas de l'écran.
Cela ne me gêne pas qu'il faille actionner l'ascenseur pour voir le pied.

2) je veux ensuite que cela affiche avec I.E la même chose qu'avec Firefox.

Ci-joint ma source HTML.

[Macmillenium]

Bonjour,

IE6- n'implémente pas la propriété min-height, c'est un height:100% appelé via des commentaires conditionnelles qu'il te faut :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
...
      img {
        border-style: none;
        }
      .entete pre, .pied pre, .contenu pre, .prose pre { margin:0 }
      .prose p { margin: 0; }
    </style>
	<!--[if IE 6]>
		<style type="text/css">
		div.global {  height:100% }
		</style>
	<![endif]-->

[momofr]

Après avoir ajouté les instructions de Macmillenium,
cela fonctionne bien quand la hauteur de la page est inférieure à la hauteur de l'écran,
mais plus quand c'est l'inverse (hauteur de page > hauteur d'écran) : le contenu de la page est alors tronqué, la hauteur de la page étant alors égale à la hauteur de l'écran.

Cela doit fonctionner quelle que soit la taille de l'écran :
la hauteur de la page peut être > à celle de l'écran avec un écran 15'', mais inférieure avec un écran 19'', l'affichage sera alors correct avec un 19'', mais tronqué avec un 15''.

Ci-joint ma source HTML complétée.

[Macmillenium]

J'ai du mal à comprendre ce que tu veux réaliser
Pourrais tu détailler un peu plus ta demande ?

[momofr]

Bonjour,

Récapitulons et essayons d’être un peu plus explicite.
L’objectif de cette discussion est de trouver un moyen pour parvenir à afficher une page ayant comme hauteur minimum la hauteur de l’écran (quelle que soit la taille de l’écran utilisé: 13'', 15'', 17'', 19'', etc).

Il n’y a aucun problème d’affichage avec Firefox, la balise "min-height" étant reconnue.

La balise "min-height" n’étant pas reconnue dans I.E. version 6, une solution pourrait être d’ajouter la balise "height:100%" ; mais le problème dans ma source actuelle est que cette balise limite la hauteur de la page à la hauteur de l’écran et que toutes les lignes ne sont pas affichées.
Par exemple, prenons le cas d’une page donnée où toutes les lignes peuvent contenir largement dans un écran de 19’’; mais les lignes de cette page ne contiennent pas toutes dans un écran de 13’’ et dans ce cas toutes les lignes ne seront pas affichées (la hauteur de la page étant limitée à la hauteur de l’écran par la balise "height:100%").

Il ne faut donc pas que le code d’une page HTML soit fonction de la taille de la page à afficher mais puisse afficher aussi bien une page de hauteur supérieure à l’écran, qu'une page de hauteur inférieure à l’écran (en affichant comme hauteur de page la hauteur de l’écran).

La source ci-jointe (qui utilise la balise "height:100%") permet de simuler un cas où la hauteur de la page est supérieure à la hauteur de l’écran, les lignes de fin du texte ne sont pas affichées.
Il suffit de supprimer des lignes de texte dans cette source pour simuler un cas où la hauteur de la page est inférieure à la hauteur de l’écran.

La question est de savoir comment faire pour résoudre le problème exposé.

[Poulpynette]

J'avais rencontré un problème de ce genre.

Voici la syntaxe qui permettait de régler mon problème :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
/* Interprete par tous les navigateurs */
.contenu {
  height: expression(document.body.clientHeight);
}
 
/* Interprete par tous les navigateurs sauf IE6 */
html>body .contenu {
  min-height: 100%;
}

(à adapter à ton CSS)

[Macmillenium]

Bonjour,

Le overflow:hidden que tu as sur .global corrige le bug du height sous IE6 ...
Dans ce cas IE6 interprète très bien le height:100%

Essaye avec :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
	<!--[if IE 6]>
		<style type="text/css">
		div.global {  height:100%; overflow:visible }
		</style>
	<![endif]-->

[momofr]

Bonjour,

Merci à Macmillenium et Poulpynette pour leurs réponses.
Après correction d'après les suggestions de Macmillenium, cela fonctionne maintenant correctement.

Il reste un petit problème lors de l’affichage avec Firefox :
je voudrais que la partie texte de couleur blanche (div.contenu et div.prose) s'étende jusqu'au bas de l'écran comme avec IE6, mais je ne suis pas arrivé à le faire.

Ci-joint ma dernière source :

[Macmillenium]

Bonsoir,

Il reste un petit problème lors de l’affichage avec Firefox :
je voudrais que la partie texte de couleur blanche (div.contenu et div.prose) s'étende jusqu'au bas de l'écran comme avec IE6, mais je ne suis pas arrivé à le faire.

Tu veux que .contenu occupe toute la hauteur de son conteneur .global.
Pour que cela fonctionne il faut que le height de .global soit renseigné (le min-height est insuffisant).

Un :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
      div.global
        {
        top: 0em;
        width: 50em;
        margin-left: auto;
        margin-right: auto;
        background-color: gray;
        overflow: hidden;
        /* min-height: 100%; */
        height:100%;
        }

répondra à ton besoin mais limite la hauteur de ton bloc à celle du viewport (zone d'affichage).

Je te conseilles de jeter un coup d'oeil sur ce topic

[momofr]

Bonjour,

Cela ne résout pas le problème avec Firefox, car dans le cas où la page est plus haute que l'écran, le texte en bas de page est tronqué (n'est pas visible), cela fonctionne uniquement dans le cas où la page est moins haute que l'écran.
Comme j'avais essayé d'expliquer, en fonction du nombre de lignes à afficher, cela va fonctionner sur un écran de 19'' mais plus sur un écran de 13'', le fond du problème est là.

[Macmillenium]

car dans le cas où la page est plus haute que l'écran, le texte en bas de page est tronqué (n'est pas visible), cela fonctionne uniquement dans le cas où la page est moins haute que l'écran.

répondra à ton besoin mais limite la hauteur de ton bloc à celle du viewport (zone d'affichage).

Ce que tu cherche à faire n'est pas possible :

Pour que cela fonctionne il faut que le height de .global soit renseigné (le min-height est insuffisant).

Or, ce n'est pas ton cas.

Pense plutôt aux colonnes factices, une petite recherche :

- http://www.developpez.net/forums/sea...archid=4292393
- http://www.developpez.net/forums/d70...ible-ensemble/
- google

[momofr]

Bonjour,

Cela a été laborieux mais une solution a enfin émergée ; merci à Macmillenium qui m'a mis sur la piste, le site suivant m'ayant apporté la solution :
"http://covertprestige.info/test/18-colonnes-factices-fluides-et-entete-piedpage-1.html"

Pour résoudre mon problème, j'ai ajouté dans ma source ci-jointe la ligne "background: url(Colonnes.gif) right top repeat-y;" où "Colonnes.gif" est une image de la largeur de "div.global" qui reprend les couleurs des colonnes "div.menu" et "div.contenu" (une hauteur de 1 pixel est suffisante).