Промывка нижнего колонтитула внизу страницы, начальная загрузка Twitter

306

Я в целом знаком с техникой очистки нижнего колонтитула с помощью CSS.

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

css  twitter-bootstrap  footer 
— Кельвин Ченг
источник
Прежде чем тестировать все ответы ниже, имейте в виду, что OP хочет, чтобы он работал с загрузчиком Twitter. Поскольку это не обязательно, загрузчик Twitter работает с Jquery, что означает, что он включен Javascript. По этой причине просто протестируйте мой ответ: stackoverflow.com / questions / 10099422 /…
— HenryW
4
Официальный пример: getbootstrap.com/examples/sticky-footer-navbar/…
— пользователь
1
Ссылка не работает! Может кто-нибудь исправить официальную ссылку на пример?
— PassionInfinite
1
@PassionInfinite getbootstrap.com/docs/4.0/examples/sticky-footer-navbar это может стать более старой версией в будущем из-за 4.0, я думаю.
— Аммад Халид

Ответы:

324

Найденные фрагменты здесь работают очень хорошо для начальной загрузки

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;
}
— Чуан Ён
источник
Это лучшее решение, которое я пробовал до сих пор. Принято это как ответ.
— Кэлвин Ченг
Привет, я реализовал этот метод, он отлично работает, но теперь у меня есть некоторые проблемы с отображением страницы на iphone (страница увеличена). Есть идеи, в чем проблема? Вот некоторые подробности: stackoverflow.com/questions/18621090/…
— pupadupa
94
На всякий случай, если вы прочитали этот ответ и не прокручивали его, стоит посмотреть другие ответы
— MattyW
4
особенно этот: stackoverflow.com/questions/10099422/…
— HenryW
1
Это лучший метод, который я нашел для Bootstrap. Для отзывчивости устройства не забывайте использовать медиазапросы для обновления высоты #main и .footer для экрана разных размеров
— SyntaxGoonoo
467

Теперь это включено в 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; }или иначе содержание страницы может быть покрыто.

Документы: http://getbootstrap.com/components/#navbar-fixed-bottom

— Санон
источник
35
@ChuanYeong К сожалению нет navbar-static-bottom.
— Лоуренс Вудман
25
@MikeCurry он спросил не о фиксированном нижнем колонтитуле, а о том, который «заполняет» пустое пространство, если на вашей странице недостаточно содержимого, чтобы нижний колонтитул оставался внизу. Если ваш нижний колонтитул носит исключительно информационный характер, фиксированный занимает только ценное пространство.
— 13
22
Это не липкий нижний колонтитул, потому что он используется position: fixed; что не правильно
— Фуркат У.
9
Да, это решение только сбрасывает на нижнюю часть окна просмотра, а не внизу страницы. т.е. нижний колонтитул всегда виден.
— RISM
3
Пришлось преуменьшить ответ, потому что это дает путаницу. ОП не хочет липкий нижний колонтитул.
— HenryW
77

Рабочий пример для 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.
Полоса прокрутки появится, если контент не помещается на экран.

— HenryW
источник
9
Да, я тоже пошел с этим. CSS может быть иногда настолько глупым. Не то чтобы это невозможно, но решения общего назначения могут быть сложными, и исправление таких надоедливых вещей в наших макетах не должно включать в себя операции по обмену стека, многократные пересмотры сущности, тестирование между браузерами и возможную сдачу простому JS обмануть. Да, я чувствую себя немного грязно, но, по крайней мере, это работает.
— meecect
3
каждое решение, на которое я смотрел, неверно. Это ЕДИНСТВЕННЫЙ, который на самом деле делает то, что должен делать - прикрепляет нижний колонтитул к нижней части страницы, не закрывая контент, если размер браузера изменен.
— Дейв
13
это не сработало так, как ожидалось для меня, тем не менее, один из лучших ответов, я исправил свою проблему, заменив $('#footer').height();на$('#footer').outerHeight();
— DarkMukke
3
Отличный ответ! У меня была пара адаптаций, которые, я думаю, улучшают это здесь: stackoverflow.com/a/36385654/8207
— Кори
6
Лучший ответ, который я нашел. Если вы хотите, чтобы он работал после изменения размера окна, просто поместите основной код из ответа внутрь $(window).resize(function() {//main code goes here});и вызовите его, $(window).resize();чтобы установить его при загрузке страницы.
— Шимон Садло
36

Вот как это сделать на официальной странице:

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's 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;
    }
}
— Лениэль Маккаферри
источник
7
Спасибо за публикацию, это было определенно лучшее решение (не говоря уже о единственном, который работал) для моего конкретного проекта, и, конечно, приятно, что оно прямо из самого проекта.
— Кори В.
1
Я не знаю, в чем заключалась сделка, но я не мог заставить ее работать, не добавив прокрутку к страницам. Я закончил тем, что изменил CSS .wrapper так, чтобы минимальная высота была «calc (100% - 120px)», где 120px - высота моего нижнего колонтитула, и удалил <div id = "push"> </ div> из html так как он, кажется, ничего не делает, кроме добавления высоты к странице, которая мне не нужна.
— jammyman34
36

Для 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;
}
— Сандип
источник
7
Он сказал, что использует Twitter Bootstrap. Что было бы самым простым способом интегрировать это в Bootstrap без полного переписывания HTML?
— Коди Грей
1
Если ОП хочет добиться эффекта липкого
— нижнего
Спасибо! Это был единственный метод, который на самом деле работал для меня на сайте ASP.NET MVC5, который использует Bootstrap. +1
— Янн Дюран
19

Ну, я нашел смесь 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

— Максим Шустин
источник
2
самое простое и элегантное решение. Остерегайтесь домашнего создания своего собственного кода CSS, поскольку он не будет обратно совместим с начальной
— загрузкой
Я использовал это, и у меня была проблема на старом андроиде (может быть, Фрой?) Со страницами, которые были короче экрана. В остальном это хорошо работало на FF, Chrome, IE11, iPhone,
— Nexus
Идеально и очень просто!
— ramires.cabral
18

В последней версии bootstrap 4.3 это можно сделать с помощью .fixed-bottomкласса. 

<div class="fixed-bottom"></div>

Вот как я использую его с нижним колонтитулом: 

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

Вы можете найти больше информации в документации о положении здесь .

— Мохамед Али ДЖАМАУИ
источник
1
Это все еще работает с выпущенной официальной версией 4.
— Klewis
Обратите внимание, что пример по адресу getbootstrap.com/docs/4.1/examples/sticky-footer имеет стиль line-height = 60px для элемента нижнего колонтитула. Это не только не нужно, но и препятствует правильной работе нижнего колонтитула, если он является родителем одного или нескольких элементов div, что обычно имеет место.
— ScottyB
13

Ответ от HenryW хороший, хотя мне нужно было несколько настроек, чтобы все заработало так, как я хотел. В частности, следующее также обрабатывает:

  • Чтобы избежать «скачка» при загрузке страницы, сначала отметьте невидимое и настройку, видимую в javascript
  • Работа с браузером изменяет размер изящно
  • Кроме того, настройка нижнего колонтитула создает резервную копию страницы, если браузер становится меньше, а нижний колонтитул становится больше страницы
  • Настройки высоты функции

Вот что сработало для меня с этими настройками:

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;
});
— Cory
источник
11

Это сработало для меня отлично.

Добавьте этот класс navbar-fixed-bottom в нижний колонтитул.

<div class="footer navbar-fixed-bottom">

Я использовал это так:

<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>

И он устанавливает снизу по всей ширине.

Изменить: Это сделает нижний колонтитул всегда видимым, это то, что вы должны принять во внимание.

— sp_omer
источник
10

Вам нужно обернуть ваш .container-fluiddiv, чтобы ваш липкий нижний колонтитул работал, вам также не хватает некоторых свойств в вашем .wrapperклассе. Попробуй это:

Удалите padding-top:70pxиз вашего bodyтега и включите его в свой .container-fluid, например, так

.wrapper > .container-fluid {
    padding-top: 70px;
}

Мы должны сделать это, потому что нажатие bodyвниз, чтобы разместить навигационную панель, в конечном итоге толкает нижний колонтитул немного дальше (на 70 пикселей дальше) за область просмотра, поэтому мы получаем полосу прокрутки. Мы получаем лучшие результаты, .container-fluidвместо этого нажимая div.

Затем мы должны удалить .wrapperкласс за пределами вашего .container-fluiddiv и обернуть #mainего этим следующим образом:

<div class="wrapper">
    <div id="main" class="container-fluid">
        <div class="row-fluid">...</div>
        <div class="push"></div>
    </div>
</div>

Ваш нижний колонтитул, конечно, должен быть вне .wrapperdiv, поэтому удалите его из 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;
   }
}
— Андрес Ильич
источник
9

Это правильный способ сделать это с помощью 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>
— Режис Б.
источник
9

Используйте утилиты 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 в контейнере элемент, чтобы основной контейнер содержимого занимал все пространство, оставшееся в высоте области просмотра.
— EGhost57
источник
Вместо того , чтобы min-height: 100vhв min-vh-100классе с Bootstrap можно использовать.
— икону
Это решение прекрасно работало в том числе мин-ОГО-100 предложения от @ikonuk
— TGR
4

Используйте компонент navbar и добавьте класс .navbar-fixed-bottom:

<div class="navbar navbar-fixed-bottom"></div>

добавить тело 

  { padding-bottom: 70px; }
— Admin File3
источник
3

для обработки макетов с ограничением ширины используйте следующее, чтобы вы не получили закругленные углы, и чтобы ваша панель навигации была заподлицо с краями приложения

<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;
    }
— 1-14x0r
источник
3

Вы можете использовать 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();
    });
});
— DucCuong
источник
2

Единственный, который работал на меня!

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}
— Рикардо
источник
2

Самым простым методом, вероятно, является использование 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">&copy; Footer4U</p>
  </div>
</footer>
— Пан Вангперавонг
источник
2

Проверено с 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;
}
— Душан Магар
источник
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;
}
— Sharpless512
источник
1

Вот решение для новейшей версии 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

— Том Т
источник
1

В соответствии с примером 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>пользовательский). элемент).

— MrValueType
источник
Я должен был поставить class="h-100"на <html>тег тоже.
— Кел
1

Используйте этот кусок кода в начальной загрузке, это работает

<div class="navbar fixed-bottom">
<div class="container">
 <p class="muted credit">Footer <a href="http://google.com">Link</a> and <a 
href="http://google.com/">link</a>.</p>
 </div>
 </div>
— Санджай
источник
1

Bootstrap v4 + решение

Вот решение, которое не требует переосмысления структуры HTML или каких-либо дополнительных хитростей CSS, связанных с отступами:

<html style="height:100%;">
  ...
  <body class="d-flex flex-column h-100">
    ...
    <main class="flex-grow-1">...</main>
    <footer>...</footer>
  </body>
  ...
</html>

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

Почему это работает

  • style="height:100%;"заставляет <html>тег занимать все пространство документа.
  • класс d-flexустанавливает display:flexдля нашего <body>тега.
  • класс flex-columnустанавливает flex-direction:columnдля нашего <body>тега. Его дети ( <header>, <main>,<footer> и любой другой прямой ребенок) теперь выровнены по вертикали.
  • класс h-100устанавливает height:100%наш <body>тег, то есть он будет покрывать весь экран по вертикали.
  • класс flex-grow-1устанавливает flex-grow:1наш <main>, эффективно инструктируя его заполнить все оставшееся вертикальное пространство, таким образом, достигая 100% вертикальной высоты, которую мы установили ранее для нашего <body>тега.

Рабочая демонстрация здесь: https://codepen.io/maxencemaire/pen/VwvyRQB

См. Https://css-tricks.com/snippets/css/a-guide-to-flexbox/ для получения дополнительной информации о flexbox.

— Kathandrax
источник
h-100класс не работает должным образом, лучше использовать min-vh-100.
— икону
@ikonuk Что именно вы подразумеваете под "не работает должным образом"? Пожалуйста, дополните.
— Катандракс
Потому что h-100класс всегда зависит от высоты родительских элементов и в некоторых случаях может не работать должным образом. Поскольку мы хотим, чтобы нижний колонтитул находился внизу области просмотра, было бы полезно использовать высоту области просмотра.
— икону
Опять же, определите «некоторые случаи». Ваш аргумент о родительской зависимости относится точно так же к min-width. Вот почему HTMLтег имеет height100% в коде. Этот пример работает, и я не понимаю, почему он не дал кросс-браузерную поддержку для heightсвойства CSS , что в конечном итоге и переводит фрагмент Bootstrap.
— Катандракс
Я не говорил, что твой пример не работает. Не все используют стиль в HTMLтеге. В моем случае ваше решение не сработало, так как я не предпочитаю использовать стиль в HTMLтеге. И я не хочу, чтобы bodyтег зависел от другого родителя, а от области просмотра. Не нужно ставить style="height:100%;"и h-100одновременно. Помещение min-vh-100в тело просто делает работу и меньше кода.
— икону
0

Похоже, что height:100%«цепь» разрывается на div#main. Попробуйте добавить height:100%к нему, и это может приблизить вас к вашей цели.

— brains911
источник
0

Здесь вы найдете подход в 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
— Ханнес
источник
Не могли бы вы подробнее рассказать о своем ответе? Ответы только на код, как правило, не рекомендуется.
— Qix - МОНИКА Плохо обращалась с
1
Хорошо, что ты хочешь знать?
— Ханнес
Мне не нужно это знать, но кто-то позже заходит на этот сайт, возможно, не знает точно, почему код вашего ответа делает то, что делает.
— Qix - МОНИКА Плохо обращалась с
Вероятно, я должен удалить это. Я написал новое вступление. :)
— Ханнес
0

Будь проще.

footer {
  bottom: 0;
  position: absolute;
}

Вам также может понадобиться сместить высоту нижнего колонтитула, добавив margin-bottomэквивалент высоты нижнего колонтитула в body.

— obfk
источник
0

Вот пример использования 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>

играть на скрипке

— Виктор
источник
0

другое возможное решение, просто используя медиа-запросы

@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;
    }
}
— GeorgeWL
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.