Forcer Le Pied De Rester Au Bas De L'Échelle?

Je n'ai pas de conteneurs, pas de papiers d'emballage.

J'ai simplement une mise en page comme si...

<body>

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

<div id="left">
</div>

<div id="right">
</div>

<div class="clear"></div>

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

Ce que je suis désireux de le faire est de s'assurer que le pied de page reste toujours en bas de l'écran si j'ai le contenu qui va très loin et ou même pas assez de contenu pour aller tout le chemin vers le bas de l'écran.

De plein droit maintenant, je peux recevoir deux des moyens énumérés ci-dessus pour travailler, mais je veux à la fois de travailler.

Voici le CSS que j'ai mis en place pour cela.

html {
height: 100%;
}

body {
height: 100%;
position: relative;
}

#footer {
position: absolute;
bottom: 0;
}

Je suis conscient que si j'applique un min-height: 100%; à l'Élément HTML dans le Document CSS qui va aller que le contenu va, mais si je n'ai pas tout le contenu, en soi, il ne colle pas au bas de l'écran. Résolution indépendamment.

J'ai rencontré ce problème plusieurs fois, et jamais suis tout à fait sûr de la façon de le comprendre. Donc, un peu d'aide serait grandement appréciée, avec quelques explications.

Merci beaucoup à tous pour votre aide!

  • but if I do not have any content, per se Mais à la fin vous doit avoir un contenu de sorte qu'importe. Vraiment personne ne se soucie de votre pied d'être coincé au fond contre juste en dessous du contenu. Je ne comprends pas pourquoi les gens perdent beaucoup de temps à essayer de parvenir à un tel inutile en effet.
  • Je me soucie si il est collé au fond. Il serait ridicule sans le pied d'être coincé au fond avec mon design. Merci pour vos commentaires si. 🙂
  • double possible de Comment faire un pied de page fixe dans le bas de la page
InformationsquelleAutor Aaron Brewer | 2011-10-07
  1. 8

    utiliser cette contrainte, c'est vraiment bien expliqué et facile à suivre tutoriel:

    http://code.google.com/p/cleanstickyfooter/

    Meilleur sticky footer jamais fonctionne vraiment très bien

    Citation du site (et je suis d'accord complètement):

    La Différence

    Google "sticky footer", j'ai énuméré ci-dessous pourquoi cette technique fonctionne
    mieux que les meilleurs résultats de cette recherche.

    http://ryanfait.com/sticky-footer/ - Cette technique est similaire, mais
    cleanStickyFooter prend beaucoup plus loin. La technique situé ici
    ne jouent pas bien lorsque vous voulez faire de votre pied de page ont une largeur de
    100%.

    http://www.cssstickyfooter.com/ - Cette technique est l'un des nombreux que j'
    parle quand je dis sa invasive avec CSS compensation hacks.

    InformationsquelleAutor fmsf
  2. 0

    Voulez-vous le pied de page pour être fixée sur le fond du contenu, quel que soit le montant de contenu, ou au bas de l'écran quelle que soit la quantité de contenu?

    Si le premier, n'est pas la peine de positionnement et laissez - la aller avec le flux de page après le contenu.

    Si le second, utiliser la position: fixe

    Vous devrez peut-être un peu plus clair. Ce qui défile? L'en-tête? À gauche? Droit? Le pied de page? Sont à Gauche et à Droite de l'ensemble de votre contenu? Pourquoi votre Corps positionné par rapport? Pourquoi avez-vous une "height: 100%;" pour html?

    • Je veux le pied de page pour être attaché au fond du contenu et le fond du contenu et si il n'y a pas assez de contenu pour s'écouler vers le bas de l'écran, j'en veux encore coincé au bas de l'écran, cela fait-il sens? Je ne veux pas faire une position fixe parce que de cette façon il va coller au fond de l'écran, indépendamment de la quantité de contenu que j'ai, et qui aurait besoin et de la marge et de rembourrage et appliqué à l'un des contenus les divs. Gauche et Droite sont le contenu, plus de donc à Droite.
    InformationsquelleAutor Ben
  3. 0

    Vous pouvez prendre un coup d'oeil à la disposition spécifiée dans cet Article par RyanFait

    De la croix-navigateur, et qui fonctionne toujours 🙂

    • À partir de Google ci-dessus... ryanfait.com/sticky-footer - Cette technique est similaire, mais cleanStickyFooter prend beaucoup plus loin. La technique situé ici ne jouent pas bien lorsque vous voulez faire de votre pied de page ont une largeur de 100%.
    InformationsquelleAutor Ryan