web-dev-qa-db-fra.com

Barre d'en-tête HTML fixe lors du défilement

J'ai écrit un exemple ici 

http://jsfiddle.net/R9Lds/

Je veux une barre d'en-tête en haut de la page.

<p style="vertical-align: middle; color: white">Head Bar</p>

Et lorsque l'utilisateur fait défiler de haut en bas, la barre d'en-tête sera toujours en haut.

Mais maintenant, le problème est que le bas de la page sera coupé.

Comme dans l'exemple ci-dessus, le 

"Titre 3", 

"Contenu 3.", 

"Auteur: Alex" 

sera coupé.

Quelqu'un a des idées sur ce problème?

Merci d'avance.

Eric

htmlcsscss-position
6
Eric Tseng

Vous pouvez réellement y arriver plus simplement que cela. Il vous suffit de définir votre en-tête div avec position: fixed, et un 'Push' div to, eh bien ... Poussez le contenu.

Jetez un coup d'oeil dans ce Fiddle

9
Dimas Pante

Vous devez définir votre barre d'en-tête sur position: fixed à la place.

Exemple:

div.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

si vous êtes préoccupé par le fait que le sommet de .home soit coupé, vous pouvez également ajouter une marge supérieure

http://jsfiddle.net/R9Lds/1/

2
Edward