Discussion :

[nicolas_isi]

Bonjour à vous,

Je suis en train de réaliser un intranet. Mes pages sont constituées de la manière suivante :

• un bandeau qui doit faire 100% en largeur et 30px en hauteur,

• puis le menu qui doit faire 100% en largeur et 30px en hauteur,

• puis un cadre qui doit faire 100% en largeur et qui doit prendre toute la hauteur restante.

• Enfin le footer qui doit faire 100% en largeur et 26px

Pour chaque cadre j'utilise la balise div. Quelqu'un a-t-il une solution en CSS pour réaliser cette page ? En sachant qu'il doit y avoir compatibilité entre Internet explorer et Mozilla.

En vous remerciant d'avance,
Nicolas

[omageus]

Tu créé une div générale, puis y insère tes élements dans l'ordre...

Je ne vois pas quel peut être le problème?

[nicolas_isi]

Ah pardon j'ai oublié de préciser. Le problème c'est les 4 div doivent tous être visibles dans la fenêtre :
Le contenu du 3ème div est varible. Donc même si le contenu est super long, ce div ne doit pas "pousser" le footer hors de l'écran.
Vous voyez ce que je veux dire ?

Nicolas

[omageus]

Dans ce cas, tu as juste à mettre ton footer en position:fixed via css.

Omageus

[nicolas_isi]

ok merci, je vais tester.

[nicolas_isi]

Je viens de tester : ça ne marche pas. Je ne maitrise pas trop le css. je vous montre le code :

Voilà ma page :

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
 
<!-- En tête  -->
<div id="header">
</div> 
 
<!-- Menu de l'application -->
<div id="menu">
</div>
 
<!-- Page sélectionnée par l'utilisateur -->
<div id="pageSelectionne">
</div>
 
<!-- Pied de page -->
<div id="footer">
</div>

Voilà mon 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
31
32
33
34
35
#pageSelectionne{
	width: auto;
	margin: 5px;
	border: solid #FF8900;
}
 
#header {
	height: 50px;
	background-color: #FF8900;
	width: auto;
	margin: 5px;
	border: solid;
 
}
 
#footer {
	width: auto;
	margin: 5px;
	border: none;
	background-color: #FF8900;
	height: 50px;
	border: solid;
}
 
#menu{
	position: fixed;
	width: auto;
	background-color: #FF8900;
	margin: 5px;
	border: none;
	height: 40px;
	font-size: 18px;
	color: black;
	border: solid;
}

Par contre si je rajoute un container qui englobe tout ça et que je le met en position relative avec un min-height: 100%, avec le footer en position absolute et un bottom: 0; j'ai le footer en bas.

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
 
<div id="container">
  <!-- En tête  -->
  <div id="header">
    <h1>header</h1>
  </div> 
 
  <!-- Menu de l'application -->
  <div id="menu">
    <h1>menu</h1>
  </div>
 
  <!-- Page sélectionnée par l'utilisateur -->
  <div id="pageSelectionne">
    <h1>page selectionnee</h1>
  </div>
 
  <!-- Pied de page -->
  <div id="footer">
    <h1>footer</h1>
  </div>
</div>

Et le nouveux 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
html, body {
	height: 100%;
}
 
#container {
	position: relative;
	min-height: 100%;
}
 
#pageSelectionne{
	width: auto;
	height: auto;
	margin: 5px;
	border: solid #FF8900;
}
 
#header {
	height: 50px;
	background-color: #FF8900;
	width: auto;
	margin: 5px;
	border: solid;
 
}
 
#footer {
	position: absolute;
	bottom: 5px;
	width: auto;
	margin: 5px;
	border: none;
	background-color: #FF8900;
	height: 50px;
	border: solid;
}
 
#menu{
	width: auto;
	background-color: #FF8900;
	margin: 5px;
	height: 40px;
	font-size: 18px;
	color: black;
	border: solid;
}

Mais j'ai le cadres de la page sélectionnée qui ne prend pas toute la place entre le menu et le footer. Et ce sous IE et Firefox

[marc.suisse]

Salut

Loin d'être capable de t'aider dans le domaine , je peux néanmoins te conseiller de jeter un coup d'oeil au lien suivant :

http://covertprestige.info/test/16-p...de-page-1.html

Peut être y trouveras-tu la solution à ton problème .

[nicolas_isi]

Merci pour ta réponce, je suis allé voir, j'ai testé mais ça ne marche pas.

Moi je souhaiterai que si on augmente la hauteur d'un des div au dessu du footer (bandeau, menu ou cadre), ça reste dans la fenêtre, sans qu'on ai besoin d'utiliser l'ascensseur par défaut (celui du navigateur qui se met quand les pages sont trop drandes) pour voir le bas.
vous voyez ce que je veux dire ?

[_jey_]

Si ton footer n'a pas un contenu trop volumineux, tu peux passer par un pseudo-élément :

Code :

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

1
2
3
4
5
6
 
body:after
{
   content:"contenu du footer";
   position:fixed;
}

Problème : ce code ne fonctionne pas sous IE...

Pour IE, j'ai une autre idée (pas sûr que ça ne marche !) :

Code :

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

1
2
3
4
5
6
7
8
9
 
#footer    /* ne marche que pour IE */
{
    position:fixed;
    top:
        expression(
            document.body.clientHeight-this.offsetHeight
        );
}