Bloquear elemento a la parte inferior de contener div

Question

#Container { 
    width: 500px; 
    height: 600px; 
} 

#TheElement { 
    width: 500px; 
    height: 100px; 
    background-color: #000000; 
} 

¿Cómo hago para que #TheElement quede bloqueado en la parte inferior de #Container, independientemente del otro contenido dentro del contenedor, sin un montón de trucos de margen?

Answer 1

Puede utilizar relative absolute positioning:

http://jsfiddle.net/gzJM6/

#Container { 
    width: 500px; 
    height: 600px; 
    position: relative 
} 

#TheElement { 
    width: 500px; 
    height: 100px; 
    background-color: #000000; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
}