Div pourcentage de la hauteur de base, mais encore de défilement
Tout d'abord, similaire, mais n'a jamais répondu à des questions:
verticalement-défilement de pourcentage basé sur les sommets verticaux, des marges-codepen-exampl
scroll-bar-sur-div-avec-overflowauto-et-pourcentage de la hauteur de
J'ai un problème avec défilement d'une partie centrale de la page web, tandis que sa hauteur doit être automatique.
Ici est un violon
L'en-tête doit être au top tout le temps, ce qui signifie que je ne veux pas le corps à devenir plus grand que 100%.
Cependant la div #messages peut devenir plus grande, et que la div besoins pour faire défiler sur son propre.
La #messages a un margin-bottom pour laisser de la place pour le fixe en bas de la div.
J'ai essayé de faire la div #messages
avec box-sizing: border-box;
et de le rendre height:100%
et de rembourrage pour le maintenir en place, mais c'était une très mauvaise à la recherche de solution et la barre de défilement a été la pleine hauteur de la page au lieu de seulement la partie intérieure.
Toute aide serait grandement appréciée.
OriginalL'auteur MakuraYami | 2013-10-01
Vous devez vous connecter pour publier un commentaire.
Vous pouvez essayer la.
Vous HTML est:
Appliquer le code CSS suivant:
Voir la demo sur: http://jsfiddle.net/audetwebdesign/5Y8gq/
Tout d'abord, régler la hauteur de 100% pour le
html
etbody
étiquettes, ce qui vous permet de référencer le port de la vue en hauteur.Vous voulez le
#header
être corrigé vers le haut de la page à l'aide deposition: fixed
, de même pour votre pied de page#input
.La clé est d'utiliser le positionnement absolu sur
#content
à l'étirer entre le bord inférieur de l'en-tête et le bord supérieur du pied de page, puis appliqueroverflow-y: scroll
pour lui permettre de faire défiler le contenu (liste des messages).Commentaire
Le code source de la
#input
bloc peut être placé à l'extérieur de la#content
bloc.OriginalL'auteur Marc Audet
Vous voulez quelque chose comme Ce
Ou peut-être - son big brother..
Pur CSS solution, sans pour autant fixer la hauteur.
HTML:
CSS:
OriginalL'auteur avrahamcool