Come posso allungare il piè di pagina in verticale?

Question

Ho un piè di pagina che è 1 x 70px, che è impostato come sfondo e riquadri in senso orizzontale.

Nei casi in cui la pagina Web non contiene molti contenuti, verrà visualizzato il piè di pagina sopra dove dovrebbe essere il piè di pagina. Voglio che si riempia di un colore solido, quindi se scorrono verso il basso, non mostrerà il piè di pagina, quindi il bianco sotto il piè di pagina.

Ecco lo stile che ho per il piè di pagina.

.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%;
}

Voglio che il piè di pagina assomigli a questo:

Answer 1

Per favore, chiarisci: vuoi un verde fisso in fondo? Se è così, basta impostare uno sfondo verde per il corpo ...

body {
    background-color:#060;
}

Questo dovrebbe darti il ??risultato nel tuo secondo screenshot. Cambia il colore in modo che corrisponda alla parte inferiore dell'immagine del gradiente.

Se vuoi che il piede sia ancorato in basso, usa il posizionamento assoluto menzionato e imposta lo sfondo in modo che corrisponda alla parte superiore dell'immagine sfumata.

Answer 2

Potresti cambiare lo stile del tuo corpo in modo che il piè di pagina si fonda.

body {

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

Answer 3

Puoi usare

position:absolute;
bottom: 0;

per mettere il piè di pagina in fondo sempre ...

Answer 4

Prova quanto segue:

.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%;
}

Ho cambiato due cose: lo sfondo è impostato su " ripeti " piuttosto che solo " repeat-x " ;, in modo che anche ripeterà. E l'altezza è impostata su "100%", che dovrebbe farla espandere per riempire lo spazio disponibile.

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;
}

Ho provato la posizione assoluta con l'impostazione bottom a zero, ecco una schermata di ciò che ha fatto.

Visualizza uno spazio bianco tra il piè di pagina e il col-middle alt text http://img266.imageshack.us/img266/7051/picture4vb3.jpg