Я в целом знаком с техникой очистки нижнего колонтитула с помощью CSS.
Но у меня возникли некоторые проблемы с получением такого подхода к загрузке Twitter, скорее всего, из-за того, что загрузчик Twitter по своей природе отзывчив. Используя загрузчик Twitter, я не могу заставить нижний колонтитул переместиться вниз страницы, используя подход, описанный в сообщении блога выше.
Найденные здесь фрагменты работают очень хорошо для начальной загрузки
Html:
<div id="wrap">
<div id="main" class="container clear-top">
<p>Your content here</p>
</div>
</div>
<footer class="footer"></footer>
CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
}
Источник: Демонстрация и Учебное пособие (больше не доступно; RIP)
Теперь это включено в Bootstrap 2.2.1.
Bootstrap 3.x
Используйте компонент navbar и добавьте .navbar-fixed-bottom:
<div class="navbar navbar-fixed-bottom"></div>
Bootstrap 4.x
<div class="navbar fixed-bottom"></div>
Не забудьте добавить body { padding-bottom: 70px; } body { padding-bottom: 70px; } или иначе содержание страницы может быть покрыто.
Документы: http://getbootstrap.com/components/#navbar-fixed-bottom
Рабочий пример для Twitter-бутстрапа NOT STICKY FOOTER
<script>
$(document).ready(function() {
var docHeight = $(window).height();
var footerHeight = $('#footer').height();
var footerTop = $('#footer').position().top + footerHeight;
if (footerTop < docHeight)
$('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>
Версия, которая всегда обновляется, если пользователь открывает окно devtools или изменяет размеры.
<script>
$(document).ready(function() {
setInterval(function() {
var docHeight = $(window).height();
var footerHeight = $('#footer').height();
var footerTop = $('#footer').position().top + footerHeight;
var marginTop = (docHeight - footerTop + 10);
if (footerTop < docHeight)
$('#footer').css('margin-top', marginTop + 'px'); // padding of 30 on footer
else
$('#footer').css('margin-top', '0px');
// console.log("docheight: " + docHeight + "\n" + "footerheight: " + footerHeight + "\n" + "footertop: " + footerTop + "\n" + "new docheight: " + $(window).height() + "\n" + "margintop: " + marginTop);
}, 250);
});
</script>
#footer Если вам не нужна полоса прокрутки, если содержимое помещается на экран, просто измените значение с 10 на 0
Полоса прокрутки появится, если содержимое не помещается на экран.
Здесь, как реализовать это с официальной страницы:
http://getbootstrap.com/2.3.2/examples/sticky-footer.html
Я только что протестировал его прямо сейчас, и он РАБОТАЕТ БОЛЬШОЙ!:)
HTML
<body>
<!-- Part 1: Wrap all page content here -->
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
</div>
</div>
</body>
Соответствующий CSS-код таков:
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it height */
margin: 0 auto -30px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 30px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
Для Sticky Footer мы используем два DIV's в HTML для базового эффекта липкого нижнего колонтитула. Напишите так:
HTML
<div class="container"></div>
<div class="footer"></div>
CSS
body,html {
height:100%;
}
.container {
min-height:100%;
}
.footer {
height:40px;
margin-top:-40px;
}
Гораздо упрощенный официальный пример: http://getbootstrap.com/examples/sticky-footer-navbar/
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
Ну, я нашел смесь navbar-inner и navbar-fixed-bottom
<div id="footer">
<div class="navbar navbar-inner navbar-fixed-bottom">
<p class="muted credit"><center>ver 1.0.1</center></p>
</div>
</div>
Вроде хорошо и у меня работает
Смотрите пример в Fiddle
В последней версии загрузчика 4.3 это можно сделать с помощью класса .fixed-bottom.
<div class="fixed-bottom"></div>
Вот как я использую его с нижним колонтитулом:
<footer class="footer fixed-bottom container">
<hr>
<p>© 2017 Company, Inc.</p>
</footer>
Вы можете найти больше информации в документации по позиции здесь.
Ответ HenryW хорош, хотя мне нужны были несколько хитростей, чтобы заставить его работать так, как я хотел. В частности, также обрабатывается следующее:
Вот что сработало для меня с этими настройками:
HTML:
<div id="footer" class="invisible">My sweet footer</div>
CSS
#footer {
padding-bottom: 30px;
}
JavaScript:
function setFooterStyle() {
var docHeight = $(window).height();
var footerHeight = $('#footer').outerHeight();
var footerTop = $('#footer').position().top + footerHeight;
if (footerTop < docHeight) {
$('#footer').css('margin-top', (docHeight - footerTop) + 'px');
} else {
$('#footer').css('margin-top', '');
}
$('#footer').removeClass('invisible');
}
$(document).ready(function() {
setFooterStyle();
window.onresize = setFooterStyle;
});
Это сработало для меня отлично.
Добавьте этот класс navbar-fixed-bottom в нижний колонтитул.
<div class="footer navbar-fixed-bottom">
Я использовал его следующим образом:
<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>
И он устанавливается снизу по всей ширине.
Изменить: это приведет к тому, что нижний колонтитул будет всегда виден, это то, что вам нужно принять во внимание.
Вам нужно обернуть ваш .container-fluid div, чтобы ваш липкий нижний колонтитул работал, вы также не указали некоторые свойства в своем классе .wrapper. Попробуйте следующее:
Удалите padding-top:70px из тэга body и добавьте его в свой .container-fluid, а именно:
.wrapper > .container-fluid {
padding-top: 70px;
}
Мы должны это сделать, потому что нажатие кнопки body вниз для размещения навигационной панели заканчивается тем, что нижний колонтитул немного дальше (на 70 пикселей дальше) мимо окна просмотра, поэтому мы получаем полосу прокрутки. Мы получаем лучшие результаты, нажимая .container-fluid div вместо.
Далее нам нужно удалить класс .wrapper вне вашего .container-fluid div и обернуть его div #main, например:
<div class="wrapper">
<div id="main" class="container-fluid">
<div class="row-fluid">...</div>
<div class="push"></div>
</div>
</div>
Ваш нижний колонтитул, конечно, должен быть вне div .wrapper, поэтому удалите его из div.wrapper и поместите его снаружи, например:
<div class="wrapper">
....
</div>
<footer class="container-fluid">
....
</footer><!--END .row-fluid-->
После этого сделайте так, чтобы ваш нижний колонтитул был ближе к вашему классу .wrapper, используя отрицательный запас, например:
.wrapper {
min-height: 100%;
height: auto !important; /* ie7 fix */
height: 100%;
margin: 0 auto -43px;
}
И это должно работать, хотя вам, вероятно, придется изменить несколько других вещей, чтобы заставить его работать, когда экран изменяется, например, сброс высоты в классе .wrapper, например:
@media (max-width:480px) {
.wrapper {
height:auto;
}
}
Это правильный способ сделать это с помощью Twitter Bootstrap и нового класса navbar-fixed-bottom: (вы не представляете, сколько времени я потратил на поиск этого)
CSS
html {
position: relative;
min-height: 100%;
}
#content {
padding-bottom: 50px;
}
#footer .navbar{
position: absolute;
}
HTML:
<html>
<body>
<div id="content">...</div>
<div id="footer">
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Используйте компонент navbar и добавьте класс .navbar-fixed-bottom:
<div class="navbar navbar-fixed-bottom"></div>
добавить тело
{ padding-bottom: 70px; }
для обработки макетов ограничений ширины используйте следующее, чтобы вы не получили закругленные углы, и чтобы ваша панель навигации была заподлицо с боками приложения
<div class="navbar navbar-fixed-bottom">
<div class="navbar-inner">
<div class="width-constraint clearfix">
<p class="pull-left muted credit">YourApp v1.0.0</p>
<p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
</div>
</div>
</div>
то вы можете использовать css для переопределения классов начальной загрузки для регулировки высоты, шрифта и цвета
.navbar-fixed-bottom {
font-size: 12px;
line-height: 18px;
}
.navbar-fixed-bottom .navbar-inner {
min-height: 22px;
}
.navbar-fixed-bottom .p {
margin: 2px 0 2px;
}
Вы можете использовать jQuery для обработки этого:
$(function() {
/**
* Read the size of the window and reposition the footer at the bottom.
*/
var stickyFooter = function(){
var pageHeight = $('html').height();
var windowHeight = $(window).height();
var footerHeight = $('footer').outerHeight();
// A footer with 'fixed-bottom' has the CSS attribute "position: absolute",
// and thus is outside of its container and counted in $('html').height().
var totalHeight = $('footer').hasClass('fixed-bottom') ?
pageHeight + footerHeight : pageHeight;
// If the window is larger than the content, fix the footer at the bottom.
if (windowHeight >= totalHeight) {
return $('footer').addClass('fixed-bottom');
} else {
// If the page content is larger than the window, the footer must move.
return $('footer').removeClass('fixed-bottom');
}
};
// Call when this script is first loaded.
window.onload = stickyFooter;
// Call again when the window is resized.
$(window).resize(function() {
stickyFooter();
});
});
Единственный, который работал у меня!:
html {
position: relative;
min-height: 100%;
padding-bottom:90px;
}
body {
margin-bottom: 90px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 90px;
}
Простейшим методом является использование Bootstrap navbar-static-bottom в сочетании с установкой главного контейнера div с height: 100vh (новый CSS3 процент просмотра порта). Это снимет нижний колонтитул до нижней части.
<main class="container" style="height: 100vh;">
some content
</main>
<footer class="navbar navbar-default navbar-static-bottom">
<div class="container">
<p class="navbar-text navbar-left">© Footer4U</p>
</div>
</footer>
Протестировано с помощью Bootstrap 3.6.6.
HTML
<div class="container footer navbar-fixed-bottom">
<footer>
<!-- your footer content here -->
</footer>
</div>
CSS
.footer {
bottom: 0;
position: absolute;
}
Используйте утилиты flex, встроенные в Bootstrap 4! Вот что я придумал, используя в основном утилиты Bootstrap 4.
<div class="d-flex flex-column" style="min-height: 100vh">
<header></header>
<div class="container flex-grow-1">
<div>Some Content</div>
</div>
<footer></footer>
</div>
.d-flex сделать основной div гибким контейнером.flex-column в главном div, чтобы упорядочить ваши flex-элементы в столбцеmin-height: 100vh до основного div, либо с атрибутом style, либо в вашем css, чтобы заполнить область просмотра вертикально.flex-grow-1 в элементе контейнера, чтобы основной контейнер содержимого занимал все пространство, оставшееся в высоте области просмотра.#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}
Высота нижнего колонтитула соответствует размеру нижнего отступа элемента обертки.
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}
В соответствии с примером Bootstrap 4.3, в случае, если вы теряете здравомыслие, как я, это действительно работает:
height: 100% (класс h-100)display: flex (класс d-flex)margin-top: auto (класс mt-auto)Проблема в том, что в современных интерфейсных средах у нас часто есть дополнительные обертки вокруг этих элементов.
Например, в моем случае с Angular я создал представление из отдельного корня приложения, основного компонента приложения и компонента нижнего колонтитула - все они добавили свой собственный элемент в DOM.
Таким образом, чтобы это работало, мне нужно было добавить классы к этим элементам-оберткам: дополнительный h-100, смещение d-flex один уровень вниз и перемещение mt-auto один уровень вверх от нижнего колонтитула (так что на самом деле он не включен). класс нижнего колонтитула больше, но на моем пользовательском элементе <app-footer>).
Похоже, что цепочка height:100% разбивается на div#main. Попробуйте добавить к нему height:100%, и это может приблизиться к вашей цели.
Здесь вы найдете подход в HAML (http://haml.info) с навигационной панелью сверху и снизу в нижней части страницы:
%body
#main{:role => "main"}
%header.navbar.navbar-fixed-top
%nav.navbar-inner
.container
/HEADER
.container
/BODY
%footer.navbar.navbar-fixed-bottom
.container
.row
/FOOTER
Держите его простым.
footer {
bottom: 0;
position: absolute;
}
Вам может потребоваться также уменьшить высоту нижнего колонтитула, добавив margin-bottom эквивалент высоты нижнего колонтитула к body.
Вот пример использования css3:
CSS
html, body {
height: 100%;
margin: 0;
}
#wrap {
padding: 10px;
min-height: -webkit-calc(100% - 100px); /* Chrome */
min-height: -moz-calc(100% - 100px); /* Firefox */
min-height: calc(100% - 100px); /* native */
}
.footer {
position: relative;
clear:both;
}
HTML:
<div id="wrap">
<div class="container clear-top">
body content....
</div>
</div>
<footer class="footer">
footer content....
</footer>
Вот как это делает bootstrap:
http://getbootstrap.com/2.3.2/examples/sticky-footer.html
Просто используйте источник страницы, и вы должны быть в состоянии видеть. Дон 'забудьте <div id="wrap"> верхнюю часть.
другое возможное решение, просто используя медиа-запросы
@media screen and (min-width:1px) and (max-width:767px) {
.footer {
}
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
.footer{
bottom: 0;
width: 100%;
position: absolute;
}
}
@media screen and (min-width:992px) and (max-width:1199px) {
.footer{
bottom: 0;
width: 100%;
position: absolute;
}
}
@media screen and (min-width:1120px){
.footer{
bottom: 0;
width: 100%;
position: absolute;
}
}
Используйте приведенный ниже класс, чтобы переместить его в последнюю строку страницы, а также сделать его центром. Если вы используете ruby на странице HAML для rails, вы можете использовать приведенный ниже код. %footer.card.text-center
Пожалуйста, не забудьте использовать Twitter bootstrapp
Здесь решение для новейшей версии Bootstrap (4.3 на момент написания) с использованием Flexbox.
HTML:
<div class="wrapper">
<div class="content">
<p>Content goes here</p>
</div>
</div>
<footer class="footer"></footer>
CSS:
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.wrapper {
flex-grow: 1;
}
И пример codepen: https://codepen.io/tillytoby/pen/QPdomR
Используйте утилиты flex, встроенные в Bootstrap 4! Вот что я придумал, используя в основном утилиты Bootstrap 4.
<div class="d-flex flex-column" style="min-height: 100vh">
<header></header>
<div class="container">
<div>Some Content</div>
</div>
<footer class="mt-auto"></footer>
</div>
.d-flex сделать основной div гибким контейнером.flex-column в главном div, чтобы упорядочить ваши flex-элементы в столбцеmin-height: 100vh до основного div, либо с атрибутом style, либо в вашем css, чтобы заполнить область просмотра вертикально.mt-auto для элемента .mt-auto колонтитула, чтобы верхний край .mt-auto колонтитула занимал все пространство, оставшееся в высоте области просмотра.