Layout avec header et contenu full-height

Invité · 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

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

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

Invité · 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.

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,

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>

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/

Invité · 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.

Layout avec header et contenu full-height

CSS

Vue hybride

Discussions similaires

Partager

Partager