Page en hauteur fluide.

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
jpbardiau
Tyrannosaurus Rex
Messages : 2709
Inscription : 05 avr. 2004, 17:34

Page en hauteur fluide.

Message par jpbardiau »

Bonjour,
est-il possible de définir une page en hauteur fluide, c'est à dire une page qui s'adapte à la hauteur de l'écran comme on peut le faire pour la largeur ?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9
JP
Image
Image
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Message par chinon37 »

Coucou,
Amha, non, ce n'est pas possible :cry:
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
jpbardiau
Tyrannosaurus Rex
Messages : 2709
Inscription : 05 avr. 2004, 17:34

Message par jpbardiau »

J'ai pourtant trouvé entretemps une solution qui fonctionne sous Firefox, Konqueror et Opera : le body : height: 100% et les éléments de la page en pourcent à partir du bottom. A voir avec IE que je n'ai pas sous la main.
Testé en 800x600 et 1024x768 (je n'ai pas plus grand).

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9
JP
Image
Image
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Je crains le redimensionnement :?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.8) Gecko/20071022 Firebird/7.10 Firefox/2.0.0.8
jpbardiau
Tyrannosaurus Rex
Messages : 2709
Inscription : 05 avr. 2004, 17:34

Message par jpbardiau »

calimo a écrit :Je crains le redimensionnement :?
C'est à dire ?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9
JP
Image
Image
Asumbaa
Tyrannosaurus Rex
Messages : 2411
Inscription : 08 déc. 2004, 20:07

Message par Asumbaa »

jpbardiau a écrit :
calimo a écrit :Je crains le redimensionnement :?
C'est à dire ?
C'est-à-dire, ce qu'il advient d'un site dimensionné à la fenêtre lorsqu'on augmente la taille des polices, par exemple. Ou qu'on rétrécit la fenêtre.

La seule question à laquelle il faut répondre de façon futée, c'est "que se passera-t-il si ça déborde ?". La réponse la plus adaptée, à mon sens, c'est "bah, ça déborde et on scrolle".

Pour cela : min-height: 100% sur html et body, height pour IE<7 qui comprend le height comme un min-height (ou bien overflow: scroll sur le body, tiens, ça revient peut-être au même... À essayer.)

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9
jpbardiau
Tyrannosaurus Rex
Messages : 2709
Inscription : 05 avr. 2004, 17:34

Message par jpbardiau »

min-height fonctionne aussi de même que overflow: scroll; mais avec un petit décalage vers le bas, par contre overflow: auto; est parfait. Mais bien sûr, si on augmente la taille des polices, ça scrolle.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9
JP
Image
Image
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Oui pardon, je n'ai pas été clair :oops:
Je pensais effectivement au redimensionnement de la taille des polices, c'est assez étonnant si c'est fixé en pourcent que ça ne finisse pas par se chevaucher... tant mieux si c'est le cas ! :D

On peut avoir un exemple ? Ce serait très intéressant :wink:

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.8) Gecko/20071022 Firedragon/7.10 Firefox/2.0.0.8
jpbardiau
Tyrannosaurus Rex
Messages : 2709
Inscription : 05 avr. 2004, 17:34

Message par jpbardiau »

Si si, les textes se chevauchent quand on les agrandit. Voici la page de test

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9
JP
Image
Image
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Ah, ok, c'est donc bien ce que je pensais :lol:
Cela dit c'est très joli dans un grand écran (1600x1200) :wink:

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.8) Gecko/20071022 Firedragon/7.10 Firefox/2.0.0.8
jpbardiau
Tyrannosaurus Rex
Messages : 2709
Inscription : 05 avr. 2004, 17:34

Message par jpbardiau »

Je verrai ça lundi au boulot sur un plus grand écran ainsi que sur IE.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9
JP
Image
Image
jpbardiau
Tyrannosaurus Rex
Messages : 2709
Inscription : 05 avr. 2004, 17:34

Message par jpbardiau »

Je regardais les stats des résolutions sur mon site pour les 30 derniers jours :
800x600 : 3.8%
1024x768 : 41.2 %
tout le reste : plus grand (jusque 2560x1600)

Ca veut dire qu'on peut plus travailler en largeur fixe de 780px par exemple, ça devient trop riquiqui pour les grands écrans.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9
JP
Image
Image
jpbardiau
Tyrannosaurus Rex
Messages : 2709
Inscription : 05 avr. 2004, 17:34

Message par jpbardiau »

C'est en ligne

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9
JP
Image
Image
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Si tu veux mon avis, tu devrais essayer de définir un "min-height" et un "min-width" avec des valeurs en em, donc dépendant de la taille de la police... mais c'est juste une idée comme ça :wink:

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.8) Gecko/20071022 Firelimace/7.10 Firefox/2.0.0.8
jpbardiau
Tyrannosaurus Rex
Messages : 2709
Inscription : 05 avr. 2004, 17:34

Message par jpbardiau »

Sur quoi faudrait-il appliquer ce min-height et ce min-width et quelle valeur leur donner ?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.9) Gecko/20071025 Firefox/2.0.0.9
JP
Image
Image
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 5 invités