Positionnement header et footer

**cleminouleminou** · 12/03/2017, 15h39

Bonjour je suis actuellement entrain de refondre mon code css et html car j'ai de gros problème d’affichage lors de l’intégration de mon php.

Je n'arrive pas à positionner mon footer en bas de page automatiquement, peut importe si la page est vide.

Et je dois avouer que je suis actuellement complètement perdue car j'ai fouiller des heures sur internet et impossible de trouver une réponse à mon problème.

Je m'en remet donc à vous, qui etes bon en CSS contrairement à moi.

Un gros merci d'avance.

HTML :

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="css/style.css" />
		<link rel="icon" type="image/png" href="img/logo.png" />
        <title>test</title>
    </head>
 
    <body>
			<div id="main">
 
				<header>    
					<nav class="menu">                    
 
					</nav>
 
					<div id="connexion">
 
					</div>
				</header>
 
				<article>
					<p> test </p>
				</article>
 
				<footer>
					<div class="piedlien">
 
					</div>
					<div class="piedrec">
 
					</div>
				</footer>
			</div>
    </body>
</html>

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
46
47
48
/* Corps de page */
 
body
{		
		background: #456;
		margin: auto;
 
}
 
#main
{
		background: red;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		margin: auto;
}
 
article
{
		background: green;
		width: 80%;
		height: 100%;
		margin: auto;
		margin-top: 1%;
		margin-bottom: 1%;
}
 
/* En tete */
 
header
{
		background: #28d;
		height: 70px;
		width: 100%;
}
 
 
/* Pied de page */
 
footer
{
		background: #28d;		 
		height: 70px;
		width: 100%;	
		align-self: flex-end;		
}

**vttman** · 12/03/2017, 17h22

Sans être spécialiste, tester

Code :

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

1
2
3
4
5
6
7
8
9
footer
{
background: #28d;		 
height: 70px;
width: 100%;	
align-self: flex-end;
position:absolute;
bottom: 0;
}

**cleminouleminou** · 12/03/2017, 17h42

Merci vttman de ta réponse.

Le problème avec postion: absolute c'est que le footer se positionne en bas de l’écran quand il n'y a pas de text dans le corps de la page mais lorsque l'on rajoute énormément de texte le footer reste bloquer au dessus de celui si. Et ne se positionne pas à la fin de page.

J'avais donc commencé a travailler avec l'argument flex, mais je dois avouer que je suis un peu perdue.

Merci encore à toi.