Layout avec header et contenu full-height [Résolu]

kéraunos · 04/02/2012, 12h36

Bonjour à tous.

Dans une page web, je veux mettre en place, de préférence en CSS2, une mise en page qui ressemble à ceci :

- en haut : un bandeau, fixe, dont la hauteur est connue en absolu (n pixels),
- sous le bandeau : un corps de page qui, s'il dépasse de la fenêtre du navigateur, se voit doter d'une barre de défilement verticale
- cette barre de défilement n'apparaît qu'à droite du corps de la page, pas à droite du bandeau

Dans sa nouvelle interface, la messagerie Gmail de Google ressemble à cela.

Mon problème réside dans le fait de donner une taille (height) à #content afin que, à l'aide de la propriété overflow:auto, la barre de défilement apparaisse quand cette taille est dépassée. La valeur de height (ou max-height) doit être égale à 100% moins les n pixels de #header.

Sans Javascript, je n'arrive pas à faire quelque chose de propre.
Auriez-vous une solution ?

Merci.

Bovino · 04/02/2012, 13h58

Citation:

Sans Javascript, je n'arrive pas à faire quelque chose de propre.

Manifestement, tu n'as jamais essayé d'utiliser GMail en désactivant JavaScript

kéraunos · 04/02/2012, 14h27

Si, je sais bien que c'est bourré de Javascript.

Je parlais seulement du rendu.
J'ai un cahier des charges qui me contraint fortement à m'orienter vers le moins de Javascript possible, voire pas du tout.
Si quelqu'un a une solution en CSS, je suis preneur.
Merci.

Bovino · 04/02/2012, 14h35

A ma connaissance, la détection de la hauteur de l'espace d'affichage ne peut pas se faire en CSS.
Tu n'auras donc pas le choix au niveau de l'utilisation de JavaScript.

Citation:

J'ai un cahier des charges qui me contraint fortement à m'orienter vers le moins de Javascript possible, voire pas du tout.

La bonne question à se poser est de savoir pourquoi cette contrainte ?
Très sincèrement, ce genre de contrainte me semble aberrante aujourd'hui (et encore plus lorsqu'en plus, on demande des fonctionnalités reposant sur l'utilisation de JavaScript

) et est à mon sens plus suscité par une réminiscence de "certitudes" irrationnelles liée au Web des années 90 qu'à une réflexion sérieuse.

Bien entendu, cela ne veut pas dire qu'il ne faut pas prévoir des fallbacks en cas de désactivation de JavaScript pour une raison ou une autre

NoSmoking · 04/02/2012, 15h15

Bonjour,

Citation:

Envoyé par Bovino

Tu n'auras donc pas le choix au niveau de l'utilisation de JavaScript.

il existe très souvent des astuces en CSS et il en existe aussi une dans ce cas que je ne qualifierais quand même pas de layout à la Gmail.

Base du HTML

Code html :

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

1
2
3
4
5
6
7
8
<div id="page">
  <div id="header">
  </div>
  <div id="content">
    <div id="contenu">
    </div>
  </div>
</div>

Base du 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
html, body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* evite la double barre de scroll sous certains navigateurs */
}
#page{
  position: relative;
  height:100%;
}
#header{
  height: 90px;
  overflow: hidden; /* evite le chevauchement sur #content */
}
#content{
  position: absolute;
  width: 100%;
  top: 90px;       /* hauteur header + border header eventuelle */
  bottom: 0;       /* position basse */
  overflow: auto;
}
#contenu{
  margin: 10px;
}

Un fichier de Test

Code html :

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[CSS] Hauteur Content 100% restant...]</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
html, body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: Verdana;
  font-size: 1em;
}
h1 {
  margin: 0;
  color: #6699CC;
  font-size: 2.0em;
}
h1 img{
  vertical-align : middle;
}
#page{
  position: relative;
  height:100%;
}
#header{
  height: 90px;
  background-color: #e0e0e0;
  overflow: hidden;
}
#content{
  position: absolute;
  width: 100%;
  top: 90px; /* hauteur header + border header eventuelle */
  bottom: 0;
  background-color: #fafafa;
  overflow: auto;
}
#contenu{
  margin: 10px;
}
</style>
</head>
<body>
<div id="page">
  <div id="header">
    <h1><img src="http://www.developpez.net/template/images/logo.png" alt="www.developpez.net">
    CSS Hauteur #Content 100% restant...</h1>
  </div>
  <div id="content">
    <div id="contenu">
      <h2>Un Titre</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>
</body>
</html>

Citation:

Envoyé par Bovino

La bonne question à se poser est de savoir pourquoi cette contrainte ?
Très sincèrement, ce genre de contrainte me semble aberrante aujourd'hui (et encore plus lorsqu'en plus, on demande des fonctionnalités reposant sur l'utilisation de JavaScript

) et est à mon sens plus suscité par une réminiscence de "certitudes" irrationnelles liée au Web des années 90 qu'à une réflexion sérieuse.

je partage tout à fait cet avis...

edit
trouvé dans la galerie CSS

http://css.developpez.com/tutoriels/...ers/exemple_1/

kéraunos · 04/02/2012, 16h54

Merci à vous deux pour vos réponses.

Je suis également d'accord avec la remarque de Bovino sur l'allergie aux scripts dans les pages web.

Merci beaucoup NoSmoking pour ta solution. Je me rends compte finalement que ce n'était pas si complexe... et ça m'agace.^^ D'autant plus que j'avais fini par le faire en Javascript. Mais puisqu'une solution élégante existe en CSS, allons-y.

J'ai renommé le sujet en "Layout avec header et contenu full-height". N'hésitez pas à suggérer un meilleur titre.

Bovino · 04/02/2012, 17h20

@NoSmoking : pas mal comme solution

@kéraunos :

moi aussi je suis agacé !

NoSmoking · 05/02/2012, 14h36

- Avec un overflow:hidden; dans le CSS du body, il n'y a pas de scroll horizontal si l'on réduit la fenêtre, il est donc préférable de mettre overflow-y:hidden;.

- Si l'on fixe une width à la page le rendu des scrollbars peut surprendre, on est obligé de scroller horizontalement pour faire apparaître la scrollbar verticale.

- Si l'on insère un menu déroulant dans le header, il faut supprimer du CSS de celui ci overflow:hidden; et mettre le menu dans une DIV en position:absolute et il faudra faire preuve d'astuce encore une fois.

- Il est à noter que les liens du type, <a href="#" title="Haut de page">Top</a>, sont inefficaces, et qu'il est préférable d'utiliser <a href="#contenu" title="Haut de page">Top</a>, pour remonter en haut de page.

- Cette technique diminue la fenêtre active de la hauteur du header ce qui peut être préjudiciable à une bonne lisibilité.

et j'en oublie sûrement...

Ce que je viens de voir c'est que sur ce coup Gmail "réinvente" l'utilisation des IFRAMEs

04/02/2012, 12h36	#1
kéraunos Membre régulier Inscription : janvier 2005 Messages : 157 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : janvier 2005 Messages : 157 Points : 71 Points : 71	Layout avec header et contenu full-height Bonjour à tous. Dans une page web, je veux mettre en place, de préférence en CSS2, une mise en page qui ressemble à ceci : - en haut : un bandeau, fixe, dont la hauteur est connue en absolu (n pixels), - sous le bandeau : un corps de page qui, s'il dépasse de la fenêtre du navigateur, se voit doter d'une barre de défilement verticale - cette barre de défilement n'apparaît qu'à droite du corps de la page, pas à droite du bandeau Dans sa nouvelle interface, la messagerie Gmail de Google ressemble à cela. Mon problème réside dans le fait de donner une taille (height) à #content afin que, à l'aide de la propriété overflow:auto, la barre de défilement apparaisse quand cette taille est dépassée. La valeur de height (ou max-height) doit être égale à 100% moins les n pixels de #header. Sans Javascript, je n'arrive pas à faire quelque chose de propre. Auriez-vous une solution ? Merci.
	00

04/02/2012, 17h20	#7
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 786 Points : 35 786	@NoSmoking : pas mal comme solution @kéraunos : moi aussi je suis agacé ! __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

05/02/2012, 14h36	#8
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	Quelques bémols quand même!!! - Avec un overflow:hidden; dans le CSS du body, il n'y a pas de scroll horizontal si l'on réduit la fenêtre, il est donc préférable de mettre overflow-y:hidden;. - Si l'on fixe une width à la page le rendu des scrollbars peut surprendre, on est obligé de scroller horizontalement pour faire apparaître la scrollbar verticale. - Si l'on insère un menu déroulant dans le header, il faut supprimer du CSS de celui ci overflow:hidden; et mettre le menu dans une DIV en position:absolute et il faudra faire preuve d'astuce encore une fois. - Il est à noter que les liens du type, <a href="#" title="Haut de page">Top</a>, sont inefficaces, et qu'il est préférable d'utiliser <a href="#contenu" title="Haut de page">Top</a>, pour remonter en haut de page. - Cette technique diminue la fenêtre active de la hauteur du header ce qui peut être préjudiciable à une bonne lisibilité. et j'en oublie sûrement... Ce que je viens de voir c'est que sur ce coup Gmail "réinvente" l'utilisation des IFRAMEs
	00

04/02/2012, 14h27	#3
kéraunos Membre régulier Inscription : janvier 2005 Messages : 157 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : janvier 2005 Messages : 157 Points : 71 Points : 71	Si, je sais bien que c'est bourré de Javascript. Je parlais seulement du rendu. J'ai un cahier des charges qui me contraint fortement à m'orienter vers le moins de Javascript possible, voire pas du tout. Si quelqu'un a une solution en CSS, je suis preneur. Merci.
	00

04/02/2012, 16h54	#6
kéraunos Membre régulier Inscription : janvier 2005 Messages : 157 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : janvier 2005 Messages : 157 Points : 71 Points : 71	Merci à vous deux pour vos réponses. Je suis également d'accord avec la remarque de Bovino sur l'allergie aux scripts dans les pages web. Merci beaucoup NoSmoking pour ta solution. Je me rends compte finalement que ce n'était pas si complexe... et ça m'agace.^^ D'autant plus que j'avais fini par le faire en Javascript. Mais puisqu'une solution élégante existe en CSS, allons-y. J'ai renommé le sujet en "Layout avec header et contenu full-height". N'hésitez pas à suggérer un meilleur titre.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email