[Résolu] Problème de mise en page

Bonjour,

je cherche à faire une mise en page comme ceci :



la difficulté que je rencontre c'est qu'il faut que l'entête reste affichée, que le pied reste également affiché en bas de l'écran et reste de taille fixe quelque soit la taille du navigateur et enfin que le corps scrollable occupe automatiquement le reste de la place entre l'entête et le pied. Etant plutôt néophyte en html je me tourne vers vous pour me donner au moins si possible des pistes à suivre pour réaliser ceci.

Merci pour votre attention.

Dany

Bonjour,

Si vous mettez le header et le footer en position; fixed; ça va faire le boulot désiré.

header { position: fixed; top: 0; width: 100%; }
footer { position; fixed; bottom: 0; width: 100%; }

et là, seul e contenu de votre page va scroll.

Attention de ne pas oublier de mettre un padding-top et bottom sur le contenu pour combler les hauteurs du header et footer

voici en réel :

https://codepen.io/guillaume-flament/pen/zYxYqyB?editors=1100

Bien à vous
Modifié par Gus (02 Dec 2019 - 10:17)

flex, height et overflow suffisent aujourd'hui.

exemple:

Base HTML

<header>header</header>
<main>
 ici le contenu
</main>
<footer>footer</footer>

Base CSS

body {
  margin:0;
  height:100vh;
  display:flex;
  flex-direction:column;
}
main{
  flex-grow:1;
  overflow:auto;
}

ensuite , il est possible de donner des marges et dimensions au gabarit de base : https://codepen.io/gc-nomade/pen/LYEYZYO
Modifié par gcyrillus (02 Dec 2019 - 10:40)