Comment faire une disposition verticale élastique?

Question

J'ai une page qui a 2 zones: en-tête et contenu.
L'en-tête doit être [bien sûr] fixé en haut, et n'a pas de hauteur fixe, et le contenu en dessous. Le point est que j'ai besoin de faire défiler la zone de contenu si elle déborde ... Comme: l'en-tête devrait toujours être là, mais le contenu peut être défilé, c'est à dire la fenêtre de votre navigateur, avec les barres toujours au haut et le défilement de la page. J'utilise JS pour faire ceci dans une page différente, où le "bas de page" a une taille fixe, ainsi je pourrais dire "hé, contenu, employez la taille de page moins la taille de pied de page". Puis-je implémenter ceci avec seulement du HTML + CSS, ou ai-je besoin d'utiliser JS? Et comment?

Answer 1

Cela devrait le faire ...

#header { 
    position:fixed; 
} 

Answer 2

ayant une hauteur d'en-tête de série sera plus facile, mais en fin de compte, javascript vous aidera à atteindre ce que vous cherchez. Fondamentalement, vous devez connaître la hauteur de l'écran des utilisateurs et la hauteur de votre en-tête. Soustrayez la hauteur de l'en-tête de la hauteur de l'écran des utilisateurs et utilisez cette valeur pour définir la hauteur de votre contenu.

Assurez-vous de définir le dépassement de capacité: auto; pour obtenir les barres de défilement pour votre contenu.

Vous utilisez des divs pour votre mise en page, pas des tableaux, n'est-ce pas? Si ce n'est pas le cas, envisagez d'apporter ce changement également. Les conceptions Web utilisant div sont beaucoup plus faciles à manipuler que les conceptions de table.

Ce lien devrait vous aider avec les propriétés JS spécifiques nécessaires pour obtenir la hauteur de l'écran: Here

Answer 3

Vous avez besoin que CSS. Le code suivant fera un entête de 100px, un pied de 50px et un div appelé "content" au milieu qui remplira le reste de la page. Le tout prendra tout l'espace disponible à l'intérieur de la fenêtre. Si vous redimensionnez la fenêtre du navigateur, la page sera mise à l'échelle en conséquence.

S'il y a assez de contenu dans la div "content", vous y trouverez une barre de défilement. La barre de défilement ne couvrira aucune partie de l'en-tête ou du pied de page, elle sera à l'intérieur du div "content".

<div id="header"></div> 
<div id="content"></div> 
<div id="footer"></div> 

div#header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 100px; 
} 

div#content { 
    position: fixed; 
    top: 100px; 
    left: 0; 
    right: 0; 
    bottom: 50px; 
    overflow: auto; 
} 


div#footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 50px; 
} 

En réglant différemment "gauche" et "droite", vous pouvez ne prendre qu'une certaine quantité d'espace disponible.

div#header { 
    position: fixed; 
    top: 0; 
    left: 20%; 
    right: 20%; 
    height: 100px; 
} 

div#content { 
    position: fixed; 
    top: 100px; 
    left: 20%; 
    right: 20%; 
    bottom: 50px; 
    overflow: auto; 
} 


div#footer { 
    position: fixed; 
    bottom: 0; 
    left: 20%; 
    right: 20%; 
    height: 50px; 
} 

Avec le CSS ci-dessus, le tout sera centré et laissera vide 40% de l'espace disponible horizontalement.