Come allineare div a fondo pagina, non in fondo allo schermo

Question

Desidero allineare un div in fondo alla PAGINA, non in fondo allo schermo. Quando faccio questo:

#contact-block{ 
position: absolute; 
    bottom: 0; left: 0; 
} 

, il div è collocato nella parte inferiore dello schermo. Quando la mia pagina è lunga, devo scorrere verso il basso e il div che dovrebbe essere stato in basso, galleggia da qualche parte nel mezzo.

Potrebbe esserci una soluzione semplice a questo, ma io non lo vedo.

Ecco il mio HTML:

<div id="left"> 
<div id="submenu"> <span class="menutitle">Services</span> 
    <ul> 
    </ul> 
</div> 

<div id="contact-block"> 
<span class="contacttitle">Contact</span></div> 
</div> 
<div id="content"> 
</div> 

Ho anche aggiunto un po 'di immagini per illustrare quello che voglio dire:

Il div div rosso è il contatto.

Modifica: Ho trovato una soluzione con jQuery e CSS. Questa potrebbe non essere la soluzione migliore, ma hey, funziona.

jQuery:

var offset= $(document).height()-$("#contact-block").height()- $("#footer").height()-60; 
$("#contact-block").css("top", offset); 
$("#contact-block").css("left", $("#wrapper").position().left); 

CSS:

#contact-block { 
position : absolute; 
width:216px; 
height:100px; 
background:url(../img/contact-bg.jpg) repeat-x #5c5c5c; 
} 

Answer 1

La posizione di un absolute elemento posizionato dipende dal primo antenato elemento, che non è posizionata static (che è il default, così devi impostarlo esplicitamente su relative (o absolute)).

Quindi, assicuratevi che il vostro contenitore #left che contiene il 100% di documenti-altezza e position:relative, e tutto va bene.

Answer 2

Si potrebbe voler vedere colonne di uguale altezza: http://css-tricks.com/fluid-width-equal-height-columns/.

In casi semplici questo può essere sufficiente (Io parto dal presupposto che la vostra colonna #left galleggia a sinistra e content colonna di destra galleggia e non c'è nessun altro elemento involucro, appena body):

body { 
    position:relative; 
} 

#contact-block { 
    position:absolute; 
    bottom:0; 
    left:0; 
} 

Non dimenticare di aggiungi l'elemento più chiaro <div style="clear:both"></div> nella parte inferiore del tuo body.

Answer 3

È possibile posizionare in posizione assoluta i vostri div s in posizione. Questa tecnica richiede un elemento , di cui non sono un fan, ma hey, devi farlo.

In questo esempio ho rimosso il #leftdiv interamente come era solo richiesto per il layout di proposito e non è più necessario.

HTML:

<div id="wrapper"> 
    <div id="submenu">This is services</div> 
    <div id="contact-block">This is contact</div> 
    <div id="content">This is content</div> 
</div>​ 

CSS:

#wrapper { 
    position: relative; 
    width: 960px; 
} 

#submenu { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 320px; 
    height: 320px; 
} 

#contact-block { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 320px; 
    height: 160px; 
} 

#content { 
    position: relative; 
    left: 320px; 
    right: 0; 
    top: 0; 
    width: 640px; 
    height: 640px; 
} 

//#content position is relative for the #wrapper to stretch. 
//The left property is equal to the width of the #submenu or #contact-block element 

Un buon punto di questa tecnica è che ti dà più pulito HTML. Credo che sarà più facile creare una versione mobile della tua versione in caso di necessità.

The jsfiddle

pensiero aggiuntive: L'elemento #wrapper potrebbe facilmente essere rimosso in favore di voi body elemento, che è un grande passo verso HTML semantico. Check this out!

Answer 4

Suggerirei di mettere il div rosso all'interno del div lungo a destra e alla fine di esso. Quindi usa position: relative e i margini negativi a sinistra sul div rosso per spingerlo verso sinistra. In questo modo, mentre il tuo div destro si espande, il tuo div rosso rimane sempre in fondo.