Au cours des années, j'ai lutté avec ceci. Cette année, il pourrait y avoir une solution. J'ai besoin d'un en-tête, d'un contenu et d'un pied de page. J'aimerais que le pied de page soit en bas de la page, l'en-tête en haut et le contenu entre les deux.Encore une autre question de taille de div
Je voudrais que le contenu ait une barre de défilement.
Q: Est-ce trop demander?
A: Non
CSS:
#content {
height: XXXpx;
overflow-y: auto;
}
Ah. Tout mon problème était que j'utilisais overflow-y: visible; au lieu de l'auto; –
Je ne suis pas tout à fait sûr que cela répond vraiment à votre question, mais la propriété pour obtenir une barre de défilement si nécessaire (si le contenu d'un conteneur dépasse sa taille) est
overflow: auto
il y a des propriétés sélectives pour horizontal et des barres de défilement verticales:
overflow-x: auto;
overflow-y: auto;
mais ils font partie de la spécification CSS 3.0 et pris en charge uniquement par un nombre limité de navigateurs (Firefox à savoir> 1.5, Opera et Safari).
Si vous voulez que le contenu défile, vous pouvez avoir un en-tête et un pied de page fixes. C'est le seul moyen que je connaisse. Consultez ce lien pour obtenir des conseils de mise en œuvre:
Cela vous donne un en-tête et pied de page fixe de hauteur 50 px, et une zone de contenu qui est scrollable.
<html>
<body>
<div id="header" style="position:absolute; left:0px; top:0px; height: 50px; overflow:hidden">
</div>
<div id="content" style="position:absolute; left:0px; top:50px; bottom:50px; overflow:auto;">
</div>
<div id="footer" style="position:absolute; left:0px; bottom:0px; height:50px; overflow:hidden;">
</body>
</html>
Si l'en-tête et pied de page ont des hauteurs fixes:
<style type="text/css">
#header {
height: 100px;
width: 100%;
position: absolute;
left: 0;
top: 0;
background-color: red;
}
#footer {
height: 100px;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
background-color: green;
}
#content {
width: 100%;
position: absolute;
left: 0;
top: 100px;
bottom: 100px;
overflow: auto;
background-color: blue;
}
</style>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
A: Non. ----- --- –
Vous voulez que l'en-tête/le pied de page/le contenu occupe 100%/100% des fenêtres du navigateur, et avoir le cont zone avec des capacités de défilement? Si oui, je peux envoyer un exemple ... sinon, reformuler :) – Zuul