Проблема с нижним колонтитулом

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

У меня есть несколько плавающих элементов, и использует обертку, чтобы поместить их в.

То, что я хочу, это Footer, который прилипает к нижней части страницы в любое время. Независимо от содержания или прокрутки.

Когда я это делаю, по какой-то причине нижний колонтитул прикрепляется к верхнему концу обертки , хотя я позиционировал его вне элемента оболочки в кодировке HTML.

#footerBottom { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 4em; 
 
    background-color: black; 
 

 
}

<div id="header"> 
 
\t <title>The Title Of The Website</title> 
 

 
</div> 
 
<nav> 
 
</nav> 
 

 
<div id="wrapper"> 
 
\t <div id="contentLeftOne"> 
 

 
\t </div> 
 

 
\t <div id="contentLeftTwo"> 
 

 
\t </div> 
 

 
\t <div id="contentLeftThree"> 
 

 
\t </div> 
 

 
\t <aside id="sideTop"> 
 

 
\t </aside> 
 

 
\t <aside id="sideMiddle"> 
 

 

 
\t </aside> 
 

 
\t <aside id="sideBottom"> 
 

 
\t </aside> 
 

 
</div> 
 

 
<div id="footerBottom"> 
 
\t <p>Here Is A Footer But It Isn't Sticking To The Bottom</p> 
 
</div>

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

Я что-то наблюдаю? Я googled пучок, но ничего, кажется, не разрешает это. Нужно ли использовать jQuery? Это плавающие элементы, которые закручивают вещи?

Заранее благодарим всех за помощь.

источник

2015-06-04 Nathan

Я немного починил ваш HTML, чтобы помочь вам начать работу.

Для правильного HTML, убедитесь, что ваши элементы li являются дочерними элементами элемента ul (или ol).

Также, <title> не является действительным тегом HTML. Однако title является допустимым атрибутом для некоторых тегов HTML. Тег <title> используется для метаданных как часть документа <head>, для получения дополнительной информации см .: http://www.w3.org/TR/html5/document-metadata.html#the-title-element;

Обратите внимание, что поскольку вы используете position: fixed для #footerBottom, этот элемент будет выведен из потока содержимого и расположен относительно окна просмотра. #footerBottom может появляться в любом месте вашего скрипта, и он будет располагаться в позиции, указанной вашим правилом CSS.

#footerBottom { 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 4em; 
 
    background-color: black; 
 
    color: white; 
 
} 
 
#wrapper { 
 
    margin-bottom: 4.5em; /* or else you can see it beneath the footer... */ 
 
} 
 
#wrapper, nav { 
 
    border: 1px dotted blue; 
 
} 
 
#wrapper div { 
 
    min-height: 25px; 
 
    background-color: beige; 
 
    margin: 10px 100px 10px 0; 
 
} 
 
#wrapper aside { 
 
    width: 50px; 
 
    min-height: 25px; 
 
    background-color: lightblue; 
 
    margin: 10px 0; 
 
}

<div id="header"> 
 
    <h3>The Title Of The Website</h3> 
 
</div> 
 
<nav> 
 
    <ul> 
 
    <li><a href="#">Page1</a></li> 
 
    <li><a href="#">Page2</a></li> 
 
    <li><a href="#">Page3</a></li> 
 
    <li><a href="#">Page4</a></li> 
 
    </ul> 
 
</nav> 
 

 
<div id="wrapper"> 
 
    <div id="contentLeftOne"></div> 
 
    <div id="contentLeftTwo"></div> 
 
    <div id="contentLeftThree"></div> 
 
    <aside id="sideTop"></aside> 
 
    <aside id="sideMiddle"></aside> 
 
    <aside id="sideBottom"></aside> 
 
</div> 
 

 
<div id="footerBottom"> 
 
    <p>Here Is A Footer But It Isn't Sticking To The Bottom</p> 
 
</div>

источник

2015-06-04 21:52:52

Хорошо, спасибо. До сих пор в нижнем колонтитуле не отображается текст, по крайней мере, < p>. Не знал, что мне нужно использовать UL для навигации. Он все еще прилипает к вершине, хотя, возможно, потому, что я использую CSS в других элементах на странице. Ваш код работает отлично. вместо оболочки div {} я использую идентификатор #wrapper, который я сделал для DIV, это нормально? Я думал, что TITLE является тегом HTML5, благодаря чему я исправил это сейчас. – Nathan

Также, теперь, когда я вижу ваш код. Я сделал это по-другому. вместо использования #wrapper div я использую #NameOfDivID для всего. это нормально? Кроме того, обертка не соблюдает край, который я даю. Что-то испортилось, мне, возможно, придется начинать заново, и на этот раз начать с нижнего колонтитула вместо содержимого. – Nathan

(1) Текст в нижнем колонтитуле 'p' отображается, потому что я установил белый цвет для контраста с цветом фона. (2) Элементы 'nav' (и' '' '' '' '' '' '' '' '' ') находятся в верхней части, потому что именно там они появляются в вашем документе HTML. (3) '#wrapper div' означает стиль' div', который является потомком элемента '# wrapper'. (4) Если у вас есть дополнительные правила CSS, они будут влиять на макет. Мой CSS предназначен только для демонстрации. –

Обычный поток HTML должен начинаться сверху и идти в нижнюю часть. Нижний нижний колонтитул расположен внизу, но элемент p - это только одна строка. Таким образом, он начинается в верхней части нижнего колонтитула, как и должно быть. Если вы установите высоту нижнего колонтитула на меньшую высоту, чем 4em, вы увидите разницу. Или, если на то пошло, установите размер шрифта или высоту строки в 4em и посмотрите, что произойдет.

источник

2015-06-04 21:46:27 Rob

Спасибо за ответ. Если я установил высоту нижнего колонтитула на меньшую высоту, она просто прилипала к вершине: 0; left: 0; всего документа. Я помещаю его вне оболочки, чтобы игнорировать все, что делает обертка. – Nathan

Проблема с нижним колонтитулом

ответ

Смежные вопросы