Создание нижнего колонтитула внизу страницы

То, что я действительно хочу, это сделать нижний колонтитул в нижней части страницы, пока остальная часть страниц прокручивается. Ни один из ответов здесь не нашел удовлетворительным. Поэтому, пожалуйста, если кто-то может помочь.Создание нижнего колонтитула внизу страницы

EDIT

На самом деле я динамически модификации DOM элементов тела с помощью JavaScript. Поэтому у меня нет div с именем «content». т.е. структура моего HTML файл будет выглядеть так:

<body> 

---- body ----- 

<div id="footer"> 
    My Dynamic Footer 
</div> 
</body>

источник

2013-12-28 Pragmatic Programmer

Посмотрите по адресу: //www.cssstickyfooter.com/using-sticky-footer-code.html – sachinjain024

Ребята, я хотел бы изменить свой вопрос. На самом деле я динамически изменяю элементы DOM тела с помощью javascript. Поэтому у меня нет div с именем «content». т.е. структура моего HTML файл будет выглядеть так: ---- тело -----

–

position: fixed; является единственным решением в вашем случае see this demo

CSS

html, body, #container { 
    height: 100%; 
    margin:0; 
    padding:0; 
} 
#footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    z-index: 10; 
    height: 3em; 
    width:100%; 
    background-color:grey; 
}

HTML

My Dynamic Footer

Примечание: В скрипке, снимите текст комментария, чтобы увидеть колонтитул растягивая высоту после dynmic содержания высоты !!

================= РЕДАКТИРОВАНИЕ ============================ ========

согласно вашему комментарию, вот updated fiddle

======================= === JQuery EDIT ==========================

Использование JQuery вы можете достичь цели ... see fiddle

JQ требуется:

$("<div class='space'></div>").insertBefore("#footer");

CSS

html, body { 
    height: 100%; 
    margin:0; 
    padding:0; 
} 
.space 
{ 
    height:6em; /* this is problem solver */ 
} 
#footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    z-index: 10; 
    height: 3em; 
    width:100%; 
    background-color:grey; 
}

========================== Final EDIT с помощью JAVASCRIPT ==========================

javascript demo

Keeping выше HTML разметки же, нам е ниже JavaScript, чтобы решить вашу проблему:

var link = document.getElementById("footer") 
var new_node = document.createElement("div"); 
new_node.className="space"; 
new_node.innerHTML = ""; 
link.parentNode.insertBefore(new_node, link.nextSibling);

источник

2013-12-28 05:57:17 NoobEditor

Все еще содержание тела не показано полностью. Он скрывается от нижнего колонтитула. –

@PragmaticProgrammer: ваш 'footer' является' fixed', это означает, что он останется в своем положении, и любое содержимое, которое имеет большую высоту, будет ** полностью ** нижним колонтитулом ... вам нужно только ** фиксированный нижний колонтитул с прокручиваемым страница ** .... у вас есть nythng еще в виду ??? – NoobEditor

Любое содержимое, имеющее большую высоту, находится под нижним колонтитулом, но полный контент не отображается. Проверьте это правильно! –

#footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
}

источник

2013-12-28 05:20:53 CRABOLO

В футер прилипает там, но она не должна скользить по содержанию. –

@Pragmatic Мой ответ и ссылка, приведенная в комментарии, охватывают это. –

Одна вещь, которую я хотел бы добавить, это margin-bottom так, что ваша сноска не скрывает любое содержимое, когда он достигает нижнюю часть страницы.

.content { 
    margin-bottom: 200px; 
} 
footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 200px; 
}

Live Example

источник

2013-12-28 05:28:36

Создание нижнего колонтитула внизу страницы

ответ

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