[CSS] Hauteur container avec Header et Footer fixe

12 novembre 2018 à 14:04:30

Bonjour,

J'ai un problème dans l'enchevêtrement de mes div d'une page que je veux réaliser. J'ai beaucoup cherché dans ce forum et sur google où le nombre de sujets qui traitent du problème est important mais je ne trouve pas mon bonheur...

En gros, il me faut un header fixe et un footer fixe (ça c'est fait et ça marche). Le problème est que mon contenu devant se placer entre les deux dépend du texte qu'il contient et ne va donc pas forcément jusqu'en bas.

HTML :

<!doctype html>
<html lang="fr">

<head>
<meta charset="utf-8">
<title>Démonstration des éléments de section HTML5</title>

<!-- Feuille de styles génériques -->
<link rel="stylesheet" href="style-test.css" type="text/css">

<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>

<body>

<header>HEADER</header>

<section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies hendrerit ligula, ut egestas nibh. Aenean lobortis sit amet lectus vitae dictum. Donec erat libero, tincidunt id ligula vel, pharetra tempor leo. Fusce tincidunt volutpat leo vel pretium. Duis accumsan justo sit amet neque pellentesque, id vestibulum risus tristique. Nullam ornare mauris est, eget faucibus ligula fermentum quis. Etiam tortor mauris, pellentesque et nunc et, eleifend ultrices est. Maecenas fringilla sem at luctus convallis. Vestibulum a pulvinar magna, eget malesuada sapien. In hac habitasse platea dictumst. Quisque ante felis, fermentum vitae turpis a, commodo imperdiet ligula.

In venenatis tristique orci sed viverra.
</section>

<footer>FOOTER</footer>
	
</body>
</html>

CSS:

html {
  height: 100%;
  
}
body {
	min-height: 100%;
	width:90%;
	margin:auto;
	background-color:darkgrey;
}
header{
	background-color:yellow;
	width:90%;
	position:fixed;
	height:50px;
	top:0;
}
section{
	margin:50px 0 80px 0;
	padding:15px;
	background-color:red;
}
footer{
	background-color:green;
	width:90%;
	position:fixed;
	height:80px;
	bottom:0;
	border-top: 4px solid black;	
}

L'autre possibilité pour la section était :

section{
	position:fixed;
	top:50px;
	bottom:80px;
	width:90%;
	background-color:red;
	overflow:auto;
}

Là la hauteur est bonne mais le barre de défilement est seulement dans la balise "section". Ce qui m'ennuie ...

Pouvez-vous m'aider ?

Merci et désolé pour le sujet répétitif.

-
Edité par Mathieu T. 12 novembre 2018 à 14:16:23

BigChicChicken

12 novembre 2018 à 15:25:19

Voici une solution parmi tant d'autres:

html {
  height: 100%;
   
}
body {
    min-height: 100%;
    width:90%;
    margin:auto;
    background-color:darkgrey;
}
header{
    background-color:yellow;
    width:90%;
    position:sticky; /* fixation de l'header */
    height:50px;
    top:0;
}
section{
    /* margin:50px 0 80px 0; */
    padding:15px;
    background-color:red;
    min-height: calc(100% - 134px) /* 134px = taille_header + taille_footer + border_footer */

}
footer{
    background-color:green;
    width:90%;
    position:sticky; /* fixation du footer */
    height:80px;
    bottom:0;
    border-top: 4px solid black;   
}

-
Edité par BigChicChicken 12 novembre 2018 à 15:25:57

Frogweb

12 novembre 2018 à 15:34:13

Salut,

attention à sticky qui n'est pas encore correctement supporté par tous les navigateurs :
https://caniuse.com/#search=sticky

Autant utiliser le bon vieux fixed surtout que pour le coup sticky ne sert à rien ici.

Autrement à propos de header/footer fixe :

https://www.doisjeutiliser.fr/unHeaderFooterFixes/

-
Edité par Frogweb 12 novembre 2018 à 15:36:25

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Mathieu T.

12 novembre 2018 à 16:09:36

Merci BigChicChicken. J'ignorais la possibilité de calculer dans le css

@Frogweb: J'avais déjà lu cet article et je le comprends bien mais pour mon projet je n'ai pas de meilleures idées.

Mathieu T.

18 novembre 2018 à 12:47:56

J'ai un nouveau problème avec ce code.

Lorsque je descend le contenu de ma section en scrollant le background que j'ai mis sur mes titres <H1> s'efface.

Une idée ?

https://codepen.io/drmath4/pen/aQLoVe

Merci :-)

Frogweb

19 novembre 2018 à 11:06:10

Salut,

aucun problème pour moi.

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Mathieu T.

19 novembre 2018 à 12:04:38

Et pourtant, voici ce que j'ai :

Affichage au départ :

Avant

Après avoir défilé vers le bas et être revenu en haut :

Vraiment incompréhensible ....

Frogweb

19 novembre 2018 à 12:19:49

Très curieux...

Sur quoi tu teste (OS, navigateur, support) ?
Moi je suis sur Ubuntu et j'ai testé avec FF et Chrome et le background est bien là après un aller-retour molette.

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Mathieu T.

19 novembre 2018 à 14:51:10

Je suis sur Windows avec la dernière version de chrome Version 70.0.3538.102 (Build officiel) (32 bits)

Avec Microsoft Edge, je n'ai effectivement pas le problème...

-
Edité par Mathieu T. 19 novembre 2018 à 14:52:35

Frogweb

19 novembre 2018 à 17:34:07

Il n'y vraiment pas de raison que ça plante, tu as la dernière version de Chrome.
tente un bon vidage de cache navigateur.

Tu teste seulement sur codepen ou ça le fait aussi avec la page en ligne et/ou en local ?

D'autres personnes du forum avec Windows et Chrome pourrait tester, please ?

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Mathieu T.

20 novembre 2018 à 9:51:30

Malgré le cache vidé, cela crée toujours le même problème sur code pen et en local...

(Merci pour ton aide soit dit en passant !)

Frogweb

20 novembre 2018 à 10:38:06

Je n'ai plus d'idée...

Il faut que d'autres foromeurs teste pour savoir si c'est seulement sur ta machine que ça plante.
Tu as la possibilité de tester sur une autre machine ?

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Mathieu T.

20 novembre 2018 à 16:07:11

Meme problème sur 3 autres ordinateur avec chrome (dont un sur Apple).

Aucun problème avec safari et firefox.

C'est étonnant cette différence de traitement.

Frogweb

20 novembre 2018 à 16:15:03

Mathieu T. a écrit:

Meme problème sur 3 autres ordinateur avec chrome (dont un sur Apple).

Aucun problème avec safari et firefox.

C'est étonnant cette différence de traitement.

Dingue oui, parce qu'un bug sur un simple background sur Chrome c'est la première fois que je vois ça.
Je ne vois vraiment pas de piste pour t'aider, d'autant plus que je ne reproduis pas le bug même avec Chrome...

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !