Bootstrap 3 Подведите нижний колонтитул к основанию. не зафиксировано

177

Я использую Bootstrap 3 для сайта, который я проектирую.

Я хочу иметь нижний колонтитул, как этот образец. Образец

Пожалуйста, обратите внимание, что я не хочу, чтобы это было ИСПРАВЛЕНО, поэтому начальная загрузка navbar-fixed-bottom не решает мою проблему. Я просто хочу, чтобы он всегда был внизу контента, а также был отзывчивым.

Любой гид будет очень ценится.

РЕДАКТИРОВАТЬ:

Извините, если мне не ясно. Что происходит сейчас, так это когда в теле контента не хватает контента. Мой нижний колонтитул перемещается вверх, а затем оставляет пустое пространство внизу.

Это то, что у меня сейчас есть для моего navbar

<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <h5 id='footer-header'> SITEMAP </h3>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>News</p>
                        <p>contact</p>
                    </div>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>FAQ</p>
                        <p>Privacy Policy</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxx </h3>
                    <p>yyyyyyyyyyyyy</p>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxxx </h3>
                    <p>uuuuuuuuuuuuuuu</p>
                </div>
            </div>
        </div>
    </nav>

CSS

.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}
html css twitter-bootstrap footer user3169403
источник
Есть ли у вас пример кода, над которым вы работали, который создает проблему?
badAdviceGuy
Это похоже на обычный нижний колонтитул, если вы не хотите Fixed, вы можете обновить стиль. С какой проблемой вы сталкиваетесь?
Мутант
Когда это последняя вещь в вашем HTML, она всегда будет внизу. Запутанный вопрос, который нуждается в примере кода, чтобы понять, в чем проблема.
Джо Конлин
stackoverflow.com/questions/643879/…
davidpauljunior
@davidpauljunior: Это липкие нижние колонтитулы, которые я не ищу
user3169403

Ответы:

124

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

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}

HTML

<div class="wrapper">
  <p>Your website content here.</p>
  <div class="push"></div>
</div>
<div class="footer">
  <p>Copyright (c) 2008</p>
</div>

ОБНОВЛЕНИЕ : Новая версия Bootstrap демонстрирует, как добавить липкий нижний колонтитул без добавления оболочки. Пожалуйста, смотрите ответ Jboy Flaga для более подробной информации.

Сурджит С.М.
источник
Ваши ссылки не работают
Холтер
2
Почему в оболочке есть два определения свойств высоты?
Едва не заметно
@HardlyNoticeable один имеет минимальную ширину, чтобы заставить обертку, даже если содержание меньше.
Сюрджит С.М.
Все еще задаюсь вопросом, почему существуют два определения свойств высоты. Вы не ответили @SurjithSM
Erowlin
@Erowlin Это ошибка. Вам не нужны два свойства высоты. Достаточно будет только минимальной высоты, отредактируйте ответ.
Surjith SM
316

Здесь есть упрощенное решение от начальной загрузки (где вам не нужно создавать новый класс): http://getbootstrap.com/examples/sticky-footer-navbar/

Когда вы откроете эту страницу, щелкните правой кнопкой мыши на браузере и «Просмотр источника» и откройте файл sticky-footer-navbar.css ( http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar. css )

Вы можете видеть, что вам нужен только этот CSS

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

для этого HTML

<html>
    ...
    <body>
        <!-- Begin page content -->
        <div class="container">
        </div>
        ...

        <footer class="footer">
        </footer>
    </body>
</html>
Jboy Flaga
источник
19
Это (из документации / примеров Bootstrap) должно быть принятым ответом.
Ричардм
5
Для меня это не работает, потому что мой футер довольно высокий. Здорово, если вы просто хотите абзац, но у меня есть несколько столбцов - используя этот метод, я получаю поле под нижним колонтитулом при
переходе
9
Разве это не Bootstraps липкий колонтитул? Я не думаю, что ОП означало это. Для меня с длинной страницей мой нижний колонтитул появился внизу экрана, но не внизу контента (то есть поверх контента). Я должен был изменить Положение: абсолютное; относительно (в классе .footer), чтобы это работало.
Тино Макларен
24
Это был бы правильный ответ, если бы эта тема не была «не исправлена» в заголовке ...
ruudy
1
это работает только для нижних колонтитулов с фиксированным размером, я предпочитаю решение от Филиппа Уолтона, предложенное @ChristopherTan, которое является очень тонким и не зависит от высоты
нижнего
16

используйте flexbox, так как вы можете использовать его в вашем распоряжении. Решение, предлагаемое загрузчиком 4, по-прежнему охотится на перекрывающийся контент в адаптивном макете, например: оно сломается в мобильном представлении, я натолкнулся на самую хитрую хитрость - использовать демонстрацию решения flexbox, показанную здесь :( https://philipwalton.github.io /olved-by-flexbox / demos / sticky-footer / ) таким образом, нам не нужно иметь дело с проблемой фиксированной высоты, которая на данный момент является устаревшим решением ... это решение работает для начальной загрузки 3 и 4, в зависимости от того, что вы используете.

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}
Кристофер Тан
источник
1
Это очень умное решение. Я думаю, что CSS может предложить слишком много, и мы даже не знаем, как извлечь из него максимальную пользу.
Гилберт
2
Я люблю это решение. Удивительный.
Bagus Aji Santoso
14

ОБНОВЛЕНИЕ: Это не дает прямого ответа на вопрос в целом, но другие могут найти это полезным.

Это HTML-код вашего отзывчивого нижнего колонтитула

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

Для CSS

footer{
    width:100%;
    min-height:100px;    
    background-color: #222; /* This color gets inverted color or you can add navbar inverse class in html */
}

ПРИМЕЧАНИЕ. Во время публикации этого вопроса приведенные выше строки кода не сдвигают нижний колонтитул ниже содержимого страницы; но он будет препятствовать ползанию нижнего колонтитула в середине страницы, когда на странице мало контента. Для примера, который толкает нижний колонтитул ниже содержимого страницы, посмотрите здесь http://getbootstrap.com/examples/sticky-footer/

Rex CoolCode Charles
источник
На самом деле это плохое решение, так как нижний колонтитул скрывает основной контент, когда они встречаются. Вам необходимо установить padding-bottomосновной контейнер содержимого равным высоте нижнего колонтитула. И вам нужно делать это динамически на странице loadи resizeсобытиях, а также в нижнем колонтитуле DOMSubtreeModified.
Дао
9

Для людей, которые все еще борются, и решение, на которое ответили, работает не совсем так, как вы хотите, вот самое простое решение, которое я нашел.

Оберните ваш основной контент и назначьте ему минимальную высоту просмотра. Отрегулируйте 60 на любое значение, необходимое вашему стилю.

<div id="content" style="min-height:60vh"></div>
<div id="footer"></div>

Вот и все, и это работает довольно хорошо.

EGLU
источник
У меня была та же проблема, что и рассматриваемая. Перепробовав почти все высокопоставленные ответы здесь, это был единственный, который работал для меня. И это работало во всех размерах. Единственное изменение, которое я сделал, было "min-height: 70vh". Это будет зависеть от размера верхнего и нижнего колонтитула вашего сайта.
Арфат,
Это должно быть выше, работает точно так же, как запрошено.
ям
Это сработало для моих нужд. Просто настройте значение минимальной высоты, пока не получите желаемый результат.
sawyerrken
Замечательно, это самое простое и эффективное решение проблемы размещения нижнего колонтитула!
Прахлад Ери
5

Гален Гидман опубликовал действительно хорошее решение проблемы гибкого нижнего колонтитула, который не имеет фиксированной высоты. Вы можете найти его полное решение в его блоге: http://galengidman.com/2014/03/25/responsive-furable-height-sticky-footers-in-css/

HTML

<header class="page-row">
  <h1>Site Title</h1>
</header>

<main class="page-row page-row-expanded">
  <p>Page content goes here.</p>
</main>

<footer class="page-row">
  <p>Copyright, blah blah blah.</p>
</footer>

CSS

html,
body { height: 100%; }

body {
  display: table;
  width: 100%;
}

.page-row {
  display: table-row;
  height: 1px;
}

.page-row-expanded { height: 100%; }
weiy
источник
Кажется, это совместимо с начальной загрузкой, и, следовательно, должен быть принятый ответ, imho. Это не идеально, так как кажется, что появляется горизонтальная полоса прокрутки.
Флориан Мертенс
Флориан: Для меня нет горизонтальной полосы прокрутки.
Едва не заметно
4

Для чистого решения CSS прокрутите после 2-го <hr>. Первый - первоначальный ответ (дан еще в 2016 году)

Главный недостаток вышеупомянутых решений - фиксированная высота нижнего колонтитула.
И это просто не врезается в реальный мир, где люди используют миллионы устройств и имеют плохую привычку вращать их, когда вы меньше всего этого ожидаете, и ** Poof! ** там идет содержание вашей страницы за нижний колонтитул!

В реальном мире вам нужна функция, которая вычисляет высоту нижнего колонтитула и динамически корректирует содержимое страницы padding-bottomв соответствии с этой высотой. И вам нужно запустить эту крошечную функцию для страницы loadи resizeсобытий, а также для нижнего колонтитула DOMSubtreeModified(на случай, если ваш нижний колонтитул динамически обновляется асинхронно или содержит анимированные элементы, которые изменяют размер при взаимодействии с ним).

Вот подтверждение концепции с использованием jQuery v3.0.0и Bootstrap v4-alpha, но нет причины, по которой он не должен работать на более низких версиях каждой из них.

Показать фрагмент кода

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

Примечание: я намеренно обернул его $([selector]).accomodateFooter()как плагин jQuery, чтобы его можно было запускать на любом элементе DOM, так как в большинстве макетов это не тот $('body'), bottom-paddingкоторый нуждается в настройке, а какой-то элемент обертки страницы с position:relative(обычно непосредственным родителем footer) ,

Позднее редактирование (3+ года после первоначального ответа):

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

Вот:

Показать фрагмент кода

дао
источник
3

Этот метод использует минимальную разметку. Просто поместите весь ваш контент в .wrapper, у которого padding-bottom и отрицательный margin-bottom равны высоте нижнего колонтитула (в моем примере 100px).

html, body {
    height: 100%;
}

/* give the wrapper a padding-bottom and negative margin-bottom equal to the footer height */

.wrapper {
    min-height: 100%;
    height: auto;
    margin: 0 auto -100px;
    padding-bottom: 100px;
}
.footer {
    height: 100px;
}

<body>

<div class="wrapper">
  <p>Your website content here.</p>
</div>
<div class="footer">
   <p>Copyright (c) 2014</p>
</div>

</body>
Vin
источник
2

Или это

<footer class="navbar navbar-default navbar-fixed-bottom">
    <p class="text-muted" align="center">This is a footer</p>
</footer>
AnBisw
источник
1

Для Bootstrap:

<div class="navbar-fixed-bottom row-fluid">
  <div class="navbar-inner">
    <div class="container">
      Text
    </div>
  </div>
</div>
shilovk
источник
2
Вопрос, в частности, гласит, что navbar-fixed-bottomэто НЕ то, что решает проблему.
p4sh4
1

Ни одно из этих решений точно не сработало для меня идеально, потому что в моем нижнем колонтитуле я использовал класс navbar. Но я получил решение, которое работало и не содержало Javascript. Использовал Chrome для помощи в формировании медиазапросов. Высота нижнего колонтитула изменяется по мере изменения размера экрана, поэтому вы должны обратить на это внимание и соответственно отрегулировать. Содержимое нижнего колонтитула (я задаю id = "footer" для определения моего содержимого) должно использовать postion = absolute и bottom = 0, чтобы держать его в нижней части. Также ширина: 100%. Вот мой CSS с медиа-запросами. Вам нужно будет настроить min-width и max-width и добавить или удалить некоторые элементы:

#footer {
  position: absolute;
  color:  #ffffff;
  width: 100%;
  bottom: 0; 
}
@media only screen and (min-width:1px) and (max-width: 407px)  {
    body {
        margin-bottom: 275px;
    }

    #footer {
        height: 270px; 
    }
}
@media only screen and (min-width:408px) and (max-width: 768px)  {
    body {
        margin-bottom: 245px;
    }

    #footer {
        height: 240px; 
    }
}
@media only screen and (min-width:769px)   {
    body {
        margin-bottom: 125px;
    }

    #footer {
        height: 120px; 
    }
}
Брайан Эдвардс
источник