Comment puis-je étirer le pied de page verticalement?

Question

J'ai un pied de page de 1 x 70 pixels, défini comme fond et mosaïque horizontale.

Dans les cas où la page Web ne contient pas beaucoup de contenu, le pied de page ci-dessus apparaîtra à l'emplacement où il devrait se trouver. Je veux que le texte soit rempli avec une couleur unie. Par conséquent, s’ils font défiler la page vers le bas, le pied de page ne sera pas affiché, puis le blanc sous le pied de page.

Voici le style que j'ai pour le pied de page.

.footer{
    background:#055830 url('/images/footer_tile.gif') repeat-x top left;
    color:#fff;
    font-size:12px;
    height: 70px;
    margin-top: 10px;
    font-family: Arial, Verdana, sans-serif;
    width:100%;
}

Je veux que le pied de page ressemble à ceci:

Answer 1

S'il vous plaît clarifier - voulez-vous un vert uni en bas? Si c'est le cas, il suffit de définir un fond vert pour le corps ...

body {
    background-color:#060;
}

Cela devrait vous donner le résultat dans votre deuxième capture d'écran. Modifiez la couleur pour qu'elle corresponde au bas de votre image en dégradé.

Si vous souhaitez que le pied soit ancré au bas, utilisez le positionnement absolu mentionné et réglez l'arrière-plan sur le haut de l'image en dégradé.

Answer 2

Vous pouvez modifier le style de votre corps pour que le pied de page se fond bien.

body {

background: rgb(173, 173, 173);
}

Answer 3

Vous pouvez utiliser

position:absolute;
bottom: 0;

toujours mettre le pied de page en bas ...

Answer 4

Essayez ce qui suit:

.footer{
    background:#055830 url('/images/footer_tile.gif') repeat top left;
    color:#fff;
    font-size:12px;
    height: 100%;
    margin-top: 10px;
    font-family: Arial, Verdana, sans-serif;
    width:100%;
}

J'ai modifié deux choses: l'arrière-plan est défini sur "répéter". plutôt que de simplement "répéter-x", afin qu'il répète également vers le bas. Et la hauteur est définie sur "100%", ce qui devrait le faire s’étendre pour occuper l’espace disponible.

Answer 5

.footer{
    background:#055830 url('/images/footer_tile.gif') repeat top left;
    color:#fff;
    font-size:12px;
    margin-top: 10px;
    font-family: Arial, Verdana, sans-serif;
    width:100%;
    position:absolute;
    bottom: 0;
}

J'ai essayé la position absolue avec la configuration du bas à zéro, voici un écran de ce qu'il a fait.

Il affiche un espace blanc entre le pied de page et le milieu de la colonne. texte de remplacement http://img266.imageshack.us/img266/7051/picture4vb3.jpg