Фиксированный элемент на фоне

Question

Я пытаюсь сделать нижний колонтитул, который появляется из-за другого элемента div выше.

An example is the Pitchfork website with the footer on the bottom.

Я попытался сделать это в CSS:

#footer { 
    overflow: hidden; 
} 
#footer .text { 
    position: fixed; 
} 

Или я мог бы сделать его фиксированной и переместить его в нижней части страницы, установив общую высоту сайта. Но это просто сложно.

Любые идеи или простые учебники о том, как это сделать?

Answer 1

Попробуйте это:

#footer { 
    position:fixed; 
    left:0px; 
    bottom:0px; 
    height:30px; 
    width:100%; 
    background:#999; 
} 

/* IE 6 */ 
* html #footer { 
    position:absolute; 
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px'); 
} 

Answer 2

Назначьте этот CSS в сноске:

footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    z-index: -1; 
    height: 150px; /* vaue as needed */ 
} 

это фиксирует его в нижней левой и помещает его позади других элементов (г-индекс -1)

Кроме того, вы должны добавить столько же margin-bottom последнему элементу в потоке документа, сколько высота нижнего колонтитула, чтобы содержимое можно было прокручивать над нижним колонтитулом, в моем примере 150px.