Нижний колонтитул внизу

Question

Я просмотрел несколько ответов и по какой-то причине я не могу заставить их работать. Я пытаюсь создать нижний колонтитул моего веб-сайта в самом низу страницы без какого-либо пространства под ним.

Here is a link to my website. Сейчас только индекс и страница вверх.

Я студент, поэтому я знаю, что мой код не самый лучший, но я добираюсь туда!

Мой CSS:

html { 
height: 100%;} 

#wrapper { 
position:relative; 
background: #fff; 
width: 990px; 
min-height:100%; 
margin: auto;} 

footer { 
clear: both; 
height: 175px; 
width: 990px; 
background: #005959; 
position: absolute; 
bottom: 0px; 
left: 0px;} 

И мой HTML является основной оболочкой, заголовок, содержание, сноска вещь.

Answer 1

Проблема заключается в том, что родительский контейнер действует как обертка и по существу имеет высоту 0. Таким образом, когда вы полностью устанавливаете нижний колонтитул снизу, он позиционирует нижнюю часть этой обертки, которая находится в верхней части страницу, потому что она не имеет высоты. Вы можете перемещать свой нижний колонтитул, и он будет отображаться ниже. Попробуйте скорректированный CSS на футере:

footer { 
    float: left; 
    width: 100%; 
    clear: both; 
    height: 175px; 
    width: 990px; 
    background: #005959; 
} 

EDIT:

Если вы плывете все внутренние контейнеры это заставит футер к низу:

header, 
img#slideshow, 
section#mainContent, 
footer { 
    float:left; 
    width: 100%; 
} 
footer { 
    height: 175px; 
    background: #005959; 
} 

Answer 2

Просто добавьте в ваш CSS:

#footer { 
    width:100%; 
    height:80px; 
    position:absolute; 
    bottom:0; 
    left:0; 
    background:#ee5; 
} 

Вот jsfiddle с указанным кодом: https://jsfiddle.net/AndrewL32/e0d8my79/23/

Answer 3

Поскольку вы установили <section> как относительно так сноска будет позиционироваться в соответствии с ним

Поднимите нижний колонтитул из <section> или удалите относительное позиционирование с section tag