Disposition de débordement CSS

Question

J'essaie de faire une mise en page comme une application de bureau native pour mes besoins mais je ne suis pas très familier avec css.

Voici un exemple de mise en page J'ai besoin: JSFiddle Je suis en train d'utiliser trop-plein comme ça, mais fonctionne pas:

.scrollable-container { 
    border: 1px solid #00f; 
    height: auto; 
    overflow: scroll; 
} 

Ce que je suis en train de faire: - faire .content div bon espace entre .navigation (vert) et .footer (jaune) div même si la fenêtre est redimensionnée - faire .scrollable-conteneur si la taille du contenu scrollable estplus grande- Correction de l'en-tête du tableau lors du défilement

Merci.

Answer 1

Essayez de mettre max-hauteur à la classe .scrollable-container:

.scrollable-container { 
    border: 1px solid #00f; 
    overflow-y: auto; 
    max-height: calc(100vh - 190px); 
} 

190px est la somme "approximative" de la hauteur en-tête, pied de page, la navigation et le titre de la page.

Here is the updated fiddle