Нижний колонтитул нижнего колонтитула

Question

Привет, У меня есть проблема с CSS, поскольку я пытаюсь вставить нижний колонтитул в нижнюю часть страницы, но он только придерживается его так далеко, как только открывается окно просмотра, а не внизу документ.

Может кто-нибудь помочь мне понять, почему это так?

Мои css и html довольно просты, хотя, прочитав много примеров и попытавшись разобраться, я все еще не могу заставить это работать. Я не хочу, чтобы мой нижний колонтитул внутри обертки, а не за его пределами, и я также не хочу устанавливать высоту: 100% на обертке.

Мой HTML выглядит следующим образом:

<div class="wrapper"> 
... some content 
</div> 
<div class="footer"> 

</div> 

И мой CSS:

html { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    position:relative; 
} 

body { 
    position:relative; 
    height: 100%; 
    background-color: #D8D8D8; 
    margin: 0; 
    padding: 0; 
    font-family: "Trebuchet MS", Verdana, tahoma, arial, serif; 
    font-size: 12pt; 
} 

.wrapper { 
    position:relative;   
    margin-left: auto; 
    margin-right: auto; 
    width: 1024px; 
    padding: 6px; 
    margin-bottom: 30px; 

} 

.footer { 
    position: absolute; 
    bottom:0; 
    left: 50%; 
    margin-left: -512px; 
    height: 25px;   
    background-color: #E6E6E6; 
    width: 1024px; 
    padding: 6px; 
    clear:both; 

}

это можно сделать с колонтитула за пределами обертки?

Я думал, что установка абсолютного положения на нижнем колонтитуле означала бы, что оно будет позиционироваться на основе тела или html, поскольку они являются следующими элементами с позицией: относительный, но снизу: 0 кажется просто нижней частью окна просмотра даже несмотря на то, что обертка div расширяет свое прошлое с большим количеством контента.

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

Thanks

Answer 1

Позиционирование не обязательно должно использоваться постоянно. Атрибут предназначен только для определенных случаев для особо «позиционного» контента.

Я думаю, что удаление

position: absolute; 

из

.footer 

должны решить эту проблему.