Discussion :

[pasc06]

Bonjour,

Je développe un site dans lequel il y 2 pages très courtes : Contact et Restaurant.

J'essaie désespérément que celles-ci prennent toute la hauteur du navigateur, sans succès...

C'est particulièrement flagrant sur Chrome et IE 9.

La page contact est visible à cette adresse:
http://www.rasmichamvi.com/new/contact.htm

Merci de votre aide

[rodolphebrd]

Bonjour,

C'est pour l'instant ce qui se passe, votre page prend la largeur de la fenêtre d'un Ordi.
Après, voulez-vous que votre site s'adapte sur d'autres types de périphériques (tablettes, mobiles) ?

[pasc06]

J'aimerais que le footer se positionne en bas de l'écran pour ces 2 courtes pages.

Actuellement sur Chrome il est au milieu de la page !

Pour les autres périphériques que faudrait il faire?

[rodolphebrd]

Une recherche dans la FAQ CSS pour vous aider : http://css.developpez.com/faq/?page=...ooter_bas_page

[pasc06]

Cela fait 3 heures que je cherche, je n'ai plus les yeux en face des trous... J'ai même essayé des solutions en javascript...

J'ai déjà le body à 100% et le min-height 100% dans le content.

J'essaye la solution du footer en bas de la page en css..

[rodolphebrd]

Vous n'avez pas essayé de ne pas réaliser une mise en page en tableau, aussi

[rodolphebrd]

Avec le tuto je viens de le réaliser en 3 minutes...

Vous devez sortir le DIV footer du tableau et le placer après celui-ci tout en le laissant dans le DIV content.

[pasc06]

J'ai essayé maintes et maintes fois de me passer des tableaux, mais rien à faire... Rien qu'en css je n'y arrive pas... Notamment pour le positionnement des blocs...

J'ai essayé sur les pages index et contact. J'ai créé un wrapper.

Sur contact le footer se positionne bien en bas mais j'ai un espace entre le tableau blanc et le footer. Sur la page index le footer est bien en bas mais il "mange" la page et quand on utilise l'ascenseur il reste en place..!

[rodolphebrd]

Procédez par étapes : enlever le wrapper (ou mettre des commentaires conditionnels)

[rodolphebrd]

Bon annulez mon dernier message car il avait pour but de tester le bon fonctionnement de la méthode.

Vous créez une structure à l'identique du tuto:

Code html :

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

1
2
3
4
5
6
7
<div id="wrapper">
  <div id="content">
    tableau
  </div>
  <div id="footer">
     </div>
</div>

A laquelle vous ajoutez les styles suivants :

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
#wrapper {
        position : relative; 
        min-height : 100%;
        background : green;
}
#footer {
	position : absolute;
	width : 100%; /* obligatoire si la largeur du footer n'est pas spécifiée explicitement dans le code CSS */
	bottom : 0; /* positionner le footer en bas */
	left : 0; /* positionner le footer à gauche */
	background: #4b8a8b;
	padding: 15px 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #fff;
	font-weight: bold;
	text-align: center;
}
#content {
	padding-bottom : 2.9em;
	background: url(images/bgDestacados.png)repeat-x bottom left;
}

[pasc06]

Voilà c'est fait sur les pages contact et index !

Et généralisé sur les autres pages.

Sur IE j'ai un espace entre le footer et le tableau sur les pages restaurant et contact...

Sur Chrome même espace sur même espace sur les pages Rooms, Restaurant et contact...

Il faudrait que le tableau s'agrandisse en même temps que le wrapper...

Quelqu'un pour m'aider?

[pasc06]

En mettant une height=100% et une min-height=100% au content j'ai résolu le problème sur IE.

Par contre su Chrome j'ai toujours cet espace entre le bas du tableau et le footer, apparemment Chrome ne prend pas en compte...

J'ai mis le fond du content en noir pour que ce soit plus flagrant...

[rodolphebrd]

Ajouter un height:100%; au wrapper et un min-height:100%; au content.

Par contre enlever les height et min-height qui trainent un peu partout de même que la media querie inutile.

[pasc06]

Bonjour

Si j ajoute un

height=100%;

au wrapper le footer reste fixe quand j utlise l ascenseur. Le

min-height:100%;

etait deja present dans le content.

J avais essaye la la media querie pour forcer Chrome sur la hauteur du content, mais effectivement ca ne marche pas.

J ai donc toujours cet espace sur Chrome.

Une autre idee?

[rodolphebrd]

Je ne comprends pas que vous ayez tout changé.

En y allant progressivement tout était correct (testé sur FF, Chrome, Opéra et Safari).

min-height:100%;

etait deja present dans le content.

De mémoire c'était min-height:100px; qui était présent dans votre code.

[pasc06]

Merci pour votre aide

Non ca ne marche pas. Si on fait un zoom - (Ctrl -) sur les navigateurs on constate l espace entre le footer et le bas du tableau sur plusieurs pages.

Je verifierai dans la soiree et posterai eventuellement une copie d ecran.

[pasc06]

Oui effectivement on constate un vide entre le footer et le bas du tableau qd on zoome -

Voici la copie d ecran:

je ne sais pas comment rendre le tableau elastique..!

[rodolphebrd]

Rendre le tableau "élastique"...
Vous voulez dire par là faire un tableau avec une approche responsive.

Ça n'a pas grand chose à voir avec le fait de zoomer dans le navigateur.

Sinon voici un exemple

[pasc06]

Bah juste que le tableau descende jusqu 'au footer ! Ce n'est pas le cas actuellement pour les pages courtes sur Chrome sur mon écran en zoom normal (Ctrl + 0)

[rodolphebrd]

J'ai enfin trouvé votre erreur...
Essayez cela :

Code :

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

1
2
3
4
5
6
#wrapper {
  position: relative;
  background: url(images/bgDestacados.png)repeat-x bottom left;
  height: 100%;
  min-height: 800px; /* à régler selon votre souhait */
}