18041 sujets

Questions générales et questions de débutants

[résolu] Mise en page avec div fixe en bas

Bonsoir à tous,

J'ai une petite question. Il me semblait avoir vu ici un sujet à ce propos il y a quelques mois mais je ne le retrouve plus.

J'ai trois "boites" de type "div".
Elle sont toutes les trois l'une au dessus de l'autre et prennent chacune toute la largeur de la fenêtre. Jusque là, rien de spécial.
Mais j'aimerais que la première et la dernière boite aient une hauteur de 30px alors que la deuxième devrait prendre tout le reste de la fenêtre (100% - 60px).
En gros, une boite qui reste tout le temps en haut, une tout le temps en bas et l'autre qui occupe le reste de l'écran et ce même si on change la taille de la fenêtre.

Est-ce que quelqu'un pourrait me conseiller ?

D'avance un tout grand merci.
Modifié par Cozy_Cookie (04 Feb 2009 - 12:18)
Salut a toi,

Pour positionner t'es blocks en haut et en bas, tu peux les mettres en position fixed avec un top ou bottom a 0px.

Exemple:

.class1 {width:150px; height:150px; top:0px; position:fixed; }
.class2 {width:150px; height: 150px; bottom:0px; position: fixed;}


De cette manière, t'es block resteront tout en haut de manière "fixe" (même si ton site est scrollable)
Modifié par Thibow (03 Feb 2009 - 09:06)
Cozy_Cookie a écrit :
Mais j'aimerais que la première et la dernière boite aient une hauteur de 30px alors que la deuxième devrait prendre tout le reste de la fenêtre (100% - 60px).
En gros, une boite qui reste tout le temps en haut, une tout le temps en bas et l'autre qui occupe le reste de l'écran et ce même si on change la taille de la fenêtre.


Il est impossible de donnée une hauteur de 100%-60px à une boite, tu peux éventuellement passer par JavaScript pour calculer la hauteur disponible à l'écran et faire le calcul, mais c'est plutôt compliqué pour pas grand chose.

Il me semble qu'il y avait une tuto sur les pseudo-frame sur Alsa, mais je ne le retrouve plus.

Thibow > La position fixe, n'est pas gérée par tous les navigateurs. IE6 en tout cas (IE7, je me demande). Il faudra prévoir pour ces navigateurs une alternative avec un position:absolute.
Modifié par Laurie-Anne (03 Feb 2009 - 09:47)
Laurie-Anne a écrit :

tu peux éventuellement passer par JavaScript pour calculer la hauteur disponible à l'écran et faire le calcul, mais c'est plutôt compliqué pour pas grand chose.

Bonjour, c 'est même mission impossible, car si par exemple le navigateur est Internet, et que le site est en STRICT, plus de hauteur possible en javascript !!

Avant j'opérais en javascript, mais force est de constater que rien que mettre ou retirer le DOCTYPE ... stricte change toute la mise en page Smiley decu
FoxLeRenard a écrit :
Avant j'opérais en javascript, mais force est de constater que rien que mettre ou retirer le DOCTYPE ... stricte change toute la mise en page Smiley decu


Oui, c'est parce que IE, utilise le mode de rendu quirks quand on ne lui dit pas de faire autrement (avec un doctype correctement rédigé).

Il y a moyen d'utiliser JS (avec un display table cell pour les navigateurs qui le supporte, le height est normalement pris en compte par IE)
Laurie-Anne a écrit :


Oui, c'est parce que IE, utilise le mode de rendu quirks quand on ne lui dit pas de faire autrement (avec un doctype correctement rédigé).

Il y a moyen d'utiliser JS (avec un display table cell pour les navigateurs qui le supporte, le height est normalement pris en compte par IE)

La tu m'intéresse beaucoup Smiley eek

Voila ou j' en suis sur le sujet
Avec DOCTYPE ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 if (qui==1){ nx=document.body.offsetWidth;ny=document.body.offsetHeight;}
 if (qui==2){  nx = innerWidth;  ny = innerHeight; }
 if (qui==3){  nx=window.innerWidth; ny=window.innerHeight;}

Ce qui donnait au pixel prés la fenêtre ....
Mais avec ce DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

if (document.body) {nx = (document.body.clientWidth);ny = (document.body.clientHeight);} 
else {nx = (window.innerWidth);ny = (window.innerHeight);}

//======= autre methode================
 if (window.innerWidth) nx= window.innerWidth;
 else if (document.body && document.body.offsetWidth) nx= document.body.offsetWidth;
 else nx=1024;

 if (window.innerHeight) ny= window.innerHeight  ;
 else if (document.body && document.body.offsetHeight) ny= document.body.offsetHeight;
 else ny=768;


Mais de toute façon trés aproximatif Smiley fache
FoxLeRenard a écrit :
Voila ou j' en suis sur le sujet
Avec DOCTYPE ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 if (qui==1){ nx=document.body.offsetWidth;ny=document.body.offsetHeight;}
 if (qui==2){  nx = innerWidth;  ny = innerHeight; }
 if (qui==3){  nx=window.innerWidth; ny=window.innerHeight;}


Le doctype est incorrect, il en manque un bout : 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
Bonjour à tous,

Un tout grand merci pour votre aide.
Je pense avoir trouvé mon bonheur j'ai fait quelques test notamment sur base du code de "Thibow".

Un tout grand merci.
Sujet clos
Aller à