Bonjour à tous,

Encore un sujet redondant mais je fais appel à votre aide car j'ai beau tenté mainte et mainte chose rien n'y fait. Je ne pense pas avoir un code particulier mais me voilà coincée. 

Voilà Ma problématique est celle ci :

J'ai  :

- un header 

- un container

- un footer

Mon objectif est de fixé mon header en haut de page et mon footer en bas de page.

Mon container de taille variable mais celui ci comportera un scroll si trop long...

Mon footer est bien fixe en bas de page donc tout va bien par contre voici ce que fais mon header et mon container.

il se chevauche...

Et voici mon code css :

#container {
	text-align: center;
	width: 90%;
	overflow-y : auto;
	padding-left: auto;
	padding-right:auto;
}

header {
	position: fixed;
	height: 60px;
	width: 100%;
	
	font-family: "Calibri";
	text-align: center;
	font-size: 16px;
}

footer {
	height: 20px;
	width: 100%;
	display: block;
	overflow: auto;
	bottom: 0;
	position: fixed;
}

Lorsque mon header est en position relative : mon header est bien au dessus mais ne reste pas visible avec le scroll...

Et ensuite lorsque je fais jouer le scroll mon header passe en dessous du container...

J'ai bien pensé a essayé de jouer sur un margin etc... mais rien y fait.

<header>
    <?php include 'Menu.php';?>
</header>
	
<div id="container">
    #DuContenu
</div>

<footer>
    <div class="bg-warning">
       <img alt="Copyright" src="../copyright.png"> ZZZZZ
    </div>
</footer>

Est ce que vous pouvez m'aidez?

Merci d'avance...

Cordialement

@Earwenn

-
Edité par Earwenn 14 juin 2018 à 15:49:01

Salut,

Oui, c'est normal. Un élément fixe sort du flux, donc les autres éléments n'en tiennent plus compte. Il faut que tu ajoutes une marge en haut de ton contenu.

Autres points :

• On évite les width: 100%; https://blog.goetter.fr/2011/11/30/width-100-tu-es-le-mal/ 
• On évite les ID aussi, garde ça pour les ancres. Pour ton CSS, utilise des classes.
• Mets des classes sur les éléments que tu veux appeler en CSS, même si leur balise a un nom (header, footer, etc.). Rien ne garanti que tu auras une seul balise header ou footer sur ton site final.

-
Edité par EmmanuelBeziat 14 juin 2018 à 15:52:44

Bonjour rhooManu,

En effet, c'est un petit peu mieux...mon entete est bien en haut (j'ai rajouter un top : 0)

Cependant, lorsque je scroll le header passe en dessous du container, une solution à cela?

Sur le css :

.container {
	text-align: center;
	width: 90%;
	margin-top:65px;
}

.header {
	position: fixed;
	height: 60px;
	font-family: "Calibri";
	text-align: center;
	font-size: 16px;
	top :0;
	left:0;
	right:0;
}

.footer {
	height: 20px;
	display: block;
	overflow: auto;
	bottom: 0;
	position: fixed;
	left:0;
	right:0;
}

Des solutions, il y en a.

Avant qu'on rentre là-dedans : est-ce qu'il est vraiment nécessaire que ces éléments soient fixe ? C'est insupportable dans la plupart des cas, et les utilisateurs savent scroller pour atteindre ce qu'ils cherchent. Sur de petits écrans, ça prend juste de l'espace inutilement. https://doisjeutiliser.fr/unHeaderFooterFixes/ 

Si vraiment tu veux persévérer dans cette idée, alors il faut changer de façon de faire :

https://jsfiddle.net/tmz5rLv0/3/ 

-
Edité par EmmanuelBeziat 14 juin 2018 à 17:05:34

Merci beaucoup pour cette réponse c'est bon avec ce que tu m'as indiqué comme solution.

-------------------------------------------------------------------------------------------------------------------

Je suis complètement d'accord pour le header et le footer dans un contexte d'application destinés à être multi support.

Dans mon cas, l'application est destinée à des utilisateurs ayant l'habitude de logiciel DOS et utilisé que sur PC (certains modules pourront etre exploités par tablette)

Mon header doit être fixe pour facilités "le quotidien" de ces utilisateurs.

Mon footer lui on s'en fiche, il risque de disparaître d'ailleurs mais pour l'instant on m'a demandé à ce que celui ci soit présent pour mentionner certaines informations de contact avec le SI.

Mais je suis d'accord que ce 'est pas le mieux pour le multi support.

Merci mille fois pour ta patience!