Bonjour,

je pars de cette base


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
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
 
  <title></title>
  <meta name="description" content="">
  <meta name="author" content="">
 
  <link rel="stylesheet" href="css/styles.css?v=1.0">
 
    <style>
    html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
 
#page {
    width: 100%;
    margin: 0 auto;
    min-height: 100%;
      
}
 
header {height:100px;width:100%;background-color:green;z-index: 1000;position:fixed;}
footer {height:140px;background-color:green;}
#content{width:80%;border:1px solid #CCC;margin:auto;background-color:red;}
    </style>
</head>
 
<body>
 
 
<div id="page">
 
    <header>
 
    </header>
    <div id="content">
    TEST VISIBILITE
 
 
    </div>
 
</div>
<div>
    <footer>
 
    </footer>
</div>
  <script src="js/scripts.js"></script>
</body>
</html>

Je souhaite obtenir un template sticky header avec une div #page qui prenne tout le restant de la hauteur, et un footer caché a la vue en dessous

Ca ne marche plus des que j'essaie de mettre en place le sticky header, et pousser le content avec un margin top n'arrange rien au contraire.

Si vous avez la solution, en évitant javascript de préférence, je suis preneur

précision :

Avec un top:0 sur le header et un margin-top:100px sur le content, j'ai bien un sticky header mais le content prends alors 100 % de la hauteur + 100 px, ce que je ne souhaite pas

Cdt

Par avance merci