Почему мой нижний колонтитул не находится на нижней части страницы?

Question

По какой-то нечетной причине мой нижний колонтитул появляется за содержимым на моей странице, больше не является правильной высотой, и я не могу его исправить. Я пробовал другие ответы, и никто из них не работает. Это можно посмотреть here. У кого-нибудь есть идеи?

.reviewwidget { 
 
\t width: 45%; 
 
\t margin-bottom: 25px; 
 
\t float: left; 
 
} 
 

 
.reviews { 
 
\t width: 55%; 
 
\t float:right; 
 
} 
 

 
.single-review { 
 
\t position: relative; 
 
\t width:55%; 
 
\t float:right; 
 
} 
 

 
.quotation { 
 
    position: relative; 
 
    width: 50px; 
 
    z-index:500; 
 
} 
 

 
.quotationend { 
 
    position: relative; 
 
    float:right; 
 
    width: 50px; 
 
    z-index:400; 
 
    margin-top:-10px; 
 
} 
 

 
.single-review p { 
 
    position: relative; 
 
    z-index: 550; 
 
    margin-top: -20px; 
 
    font-size:16px; 
 
    font-style: italic; 
 
} 
 

 
Footer { 
 
    background-color: #0b1b23; 
 
\t color: #ececec; 
 
\t padding: 5%; 
 
\t font-family: centrale_sans_regularregular, helvetica; 
 
\t position:relative; 
 
}

Answer 1

Измените свой контейнер следующим образом:

#container { display: table-cell; } 

Таким образом, это не будет мешать вашему размещению нижнего колонтитула.

Answer 2

Ваш #container элемент разместил контент, который не очищается, в результате чего #container «s высоты разрушаться. Вы должны прочитать о плавающих и clearfix, но вот два решения from this thread:

многоразовый класс clearfix добавить к #container элементу (рекомендуется):

.clearfix:after { 
    content: " "; 
    display: block; 
    height: 0; 
    clear: both; 
} 

Быстрый и грязный:

#container { overflow: auto; } 

Answer 3

Проблема в плавающих элементах. Вы должны поместить блок clearfix в свой html-код перед элементом нижнего колонтитула или добавить псевдоэлемент со стилями clearfix, например iqnivek.

Answer 4

Не то, чтобы ваш нижний колонтитул не оставался в нижней части страницы. ваш класс «single-review» обладает свойством float-right и он зависает над нижним колонтитулом (вызывая его автомасштабирование высоты).

попробуйте удалить поплавок прямо из. Единого обзора, и это исправит нижний колонтитул.

Но вам нужно будет положить содержимое страницы в обертку, чтобы сохранить ваши элементы на месте, или все, что будет продолжать вытаскивать и перекрывать