Header fixe

**stefane26** · 20/10/2013, 10h28

Bonjour
Je suis en train de développer un site "mobile" extensible, ce site a un header fixe, afin que la page de mon site ne soit pas recouverte par le header, je mets un padding.

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
header{
  width:100%;
  background:#1f5689;
  color: white;
  position:fixed;
  z-index:100;
}
 
section{
  padding:87px 0px 0 0px;
}

Mon soucis est le suivant : mon padding devrait aussi être extensible car suivant la grandeur de l'écran d'affichage, les 87px ne sont des fois pas suffisants (titre masqué).
Y aurait-il une autre possibilité : "dire" que le header est un block et rien s'inscrit en dessous?
Merci pour votre aide
Stéphane

**Muchos** · 21/10/2013, 02h17

Avez-vous fixer une hauteur maximum pour votre header?
Une technique possible est d'utiliser des REM (voir le support de REM). Ex :

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
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
  <meta charset="UTF-8" />
  <title>Header fixe et gentil</title>
  <style type="text/css">
/* Page pleine */
html, body {
        margin: 0; padding: 0;
        height: 100%;
}
/* HEADER fixe */
header {
        position: fixed;
        width: 100%;
        height: 3rem;
        z-index: 99;
        background: red;
}
/* Conteneur qui démarre juste après le HEADER */
.conteneur {
        position: relative;
        top: 3rem;
}
section {
        margin-bottom: 10%;
        background: gray;
}
  </style>
</head>
<body>
  <header>Dialogue<br />à deux.</header>
  <div class="conteneur">
    <section>Salut !</section>
    <section>Yo ! Tranquille ?</section>
    <section>Euh… Oui ! Et toi ?</section>
    <section>Wesh morray !</section>
    <section>Hein ?</section>
  </div>
</body>
</html>

**stefane26** · 21/10/2013, 07h33

Merci beaucoup Muchos
Ca fonctionne parfaitement, en effet, je n'avais pas donné de hauteur à mon header, cette hauteur était automatiquement dimensionnée par une image dont la dimension était proportionnelle suivant la taille de l'écran.

J'ai donc utilisé cette fonction REM pour mon header, et le top de ma page mais aussi dimensionné la hauteur de l'image avec un REM.

C'est donc résolu
Encore merci
Stéphane

Header fixe [HTML 5]

HTML

Vue hybride

Discussions similaires

Partager

Partager