Collant, pied de page, ainsi que le défilement div sans hauteur spécifique

J'aimerais une page avec un collant, pied de page, et j'aimerais le contenu ci-dessus pour être en mesure de défilement, tout en conservant l'adhérence du pied de page. Mais je ne veux pas coder en dur la hauteur de la zone de contenu, mais sa hauteur de toute la hauteur disponible sauf pour la hauteur du pied de page.

Dans le long terme, je dirais même comme pour la hauteur de la mesure de défilement de la zone de contenu à être re-extensible si la fenêtre est re-taille, mais je m'avance un peu. Je suis en supposant que je vais avoir besoin d'une combinaison de CSS et de Javascript pour réaliser cela, CSS seul ne peut pas réaliser cela?

J'ai fait des recherches de cours et ont trouvé les CSS propriété overflow, mais mon CSS en général n'est pas très bon 🙁 ci-Dessous, un peu de CSS/HTML, j'ai bricolé basé sur ryanfait.com's collant pied de page du tutoriel, si quelqu'un peut me donner quelques conseils en utilisant cela comme un point de départ. Gardez à l'esprit, j'aurai besoin de tout droit de Javascript, pas de jQuery, que ce sera utilisé dans un navigateur personnalisé (http://tkhtml.tcl.tk/hv3.html). Mon Javascript contrairement à mon CSS est bien assez bon, donc, une réponse combinant CSS spécifique suggestions générales Javascript suggestions (dont je vous puis de la chair), ce serait l'idéal.

<html>
    <head>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
</style>
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

EDIT: Ce que j'ai tenté basé sur les deux premières réponses:

J'ai fait les modifications suivantes dans le fichier CSS basés sur des parties des deux réponses reçues à ce jour:

<style>
* {
  margin: 0;
}
html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
  overflow-y: scroll;
}
.footer {
  bottom: 0;
  height: 4em;
  position: fixed;
}
</style>

Ce que cela me donne en Chrome sont deux les barres de défilement, une très faible, mais la plus importante encore, afin que le contenu qui déborde (peut-être que je suis en utilisant le terme d'erreur?) à l'extérieur de l'enveloppe de la zone, et sur le dessus (ou le bas) du pied de page, en plus de l'extérieur de l'ensemble du corps. Merci pour les aider à faire des progrès, mais j'ai encore besoin d'un peu d'aide. Voici un lien vers une capture d'écran de ce que je vois; j'ai utilisé http://www.ipsum-generator.com/ à générer tous les le contenu.

http://dl.dropbox.com/u/44728447/dynamic_wrapper_sticky_footer.JPG

InformationsquelleAutor George Jempty | 2011-10-12

4
```
html, body {
    height:100%;
    overflow:hidden;
}
.wrapper {
    overflow-y:scroll;
    height: 90%;
}
.footer {
    position:static;
    bottom: 0;
    height: 10%;
}
```
Démo: http://jsfiddle.net/vfSM3/
- Je ne veux pas coder en dur les hauteurs sous forme de pourcentages. Je veux une hauteur fixe pour le collant, pied de page, et l'enveloppe de la hauteur dynamique. Désolé si je n'étais pas assez précis
- Ok, je vois à quel point, même dans mon révisé à la question, j'ai raté votre html/body overflow:hidden, donc, qui prend soin de l'émission de deux barres de défilement sur la droite. Donc, je suis conscient de la valeur de votre réponse et peut-être en mesure d'utiliser un peu de Javascript pour obtenir les hauteurs juste la façon dont je les veux.
- Je vais accepter celle-ci, il fonctionne dans Chrome, mais ce n'est pas mon navigateur personnalisé, et m'aide le long du chemin, même si les hauteurs sont codés en dur. Pour mon navigateur personnalisé soft je peut effectivement recours à des cadres: c'est une application de bureau à l'aide de technologies web (pas contrairement à ce que vous pouvez créer à l'aide d'Adobe AIR), donc je n'ai pas les mêmes préoccupations à l'encontre de cadres que vous pourriez normalement avoir. En Plus de la CSS et de Javascript est bizarre puisque c'est un navigateur personnalisé, et je peux facilement avoir plus de contrôle à l'aide de cadres. Merci bien
InformationsquelleAutor AlienWebguy
1

Sur le pied de page div utilisation en position fixe et bas 0 comme:
```
.footer {
  bottom: 0;
  height: 4em;
  position: fixed;
}
```
- Je ne m'inquiète pas sur IE. Je n'ai besoin de quelques conseils supplémentaires quand il s'agit de la CSS nécessaires pour rendre le contenu de la div mesure de défilement si.
- Seulement IE6 ne supporte pas la position: fixed; je recommande plus de précision prochaine fois que vous voulez donner des conseils.
InformationsquelleAutor Gadget Blaster
0

Si vous souhaitez utiliser à hauteur fixe sur le pied de page, vous pouvez effectuer les opérations suivantes
```
.wrapper{
     overflow-y:scroll;
     height:calc(100% - 20px);
}

.footer {
    position:static;
    bottom: 0;
    height: 20px;
}
```
Notez que vous devez utiliser ici les espaces "100% - 20px" pour que cela fonctionne.

InformationsquelleAutor J1mak0s

Vous devez vous connecter pour publier un commentaire.