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


177

Я використовую Bootstrap 3 для сайту, який я розробляю.

Я хочу мати колонтитул, як цей зразок. Зразок

Зверніть увагу, що я не хочу його виправити, тому завантажувальний навигаційний фіксатор не вирішує мою проблему. Я просто хочу, щоб вона завжди була внизу вмісту, а також була чуйною.

Будь-який посібник буде дуже вдячний.


Редагувати:

Вибачте, якщо я не зрозумів. Зараз відбувається те, що в тілі вмісту недостатньо вмісту. Мій нижній колонтитул рухається вгору, а потім залишає порожнє місце внизу.

Це те, що у мене зараз для мого навбар

<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;
}

Чи є у вас приклад коду, над яким ви працювали, який створює проблеми?
badAdviceGuy

Схоже, звичайний колонтитул, якщо ви не хочете Виправлено, ви можете оновити стиль. З якою проблемою ви стикаєтесь?
Мутант

Коли це останнє у вашому HTML, воно завжди буде внизу. Заплутане запитання, яке потребує прикладу коду, щоб зрозуміти, у чому проблема.
Джо Конлін


@davidpauljunior: Це клейкі колонтитули, які я не шукаю
user3169403

Відповіді:


124

Дивіться приклад нижче. Це дозволить вашому Footer триматися внизу, якщо сторінка має менше вмісту, і поводиться як звичайний нижній колонтитул, якщо сторінка містить більше вмісту.

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 демонструє, як додати липкий колонтитул без додавання обгортки. Будь ласка, див. Відповідь Джбоя Флага для отримання більш детальної інформації.


Ваші посилання розірвані
Халтер

2
Чому в обгортці є два визначення властивостей висоти?
Навряд чи непомітно

@HardlyNoticeable - мінімальна ширина, щоб примусити обгортку, навіть якщо вміст менше.
Surjith SM

Досі цікаво, чому існує два визначення властивостей висоти. Ви не відповіли @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>

19
Це (з документів / прикладів Bootstrap) має бути прийнятою відповіддю.
richardm

5
Для мене це не працює, тому що мій колонтитул досить високий. Чудово, якщо ви просто хочете абзац, але у мене є кілька стовпців - за допомогою цього методу я закінчую запас під колонтитулом, коли я
переходжу

9
Хіба це не завантажувальне колонтитульне рішення Bootstraps? Я не думаю, що ОП це означало. Для мене довга сторінка моє колонтитул з’явився внизу екрана, але не внизу вмісту (тобто над вмістом). Мені довелося змінити Позицію: абсолютна; відносно (у .footer класі), щоб це працювало.
Тіно Макларен

24
Це була б правильна відповідь, якби ця тема не була "не зафіксована" в заголовку ...
ruudy

1
це працює лише для колонтитулів з фіксованим розміром, я віддаю перевагу рішення Філіпа Уолтона, запропонованого @ChristopherTan, який є надзвичайно струнким і незалежним від висоти нижнього колонтитулу
buergi

16

використовуйте flexbox, оскільки ви можете використовувати його у вашому розпорядженні. Рішення, що пропонується bootstrap 4, все ще охоплює перекриття вмісту у чуйному макеті, наприклад: воно порушиться в мобільному режимі перегляду, я натрапив на найакуратніший трюк - використовувати демонстраційне рішення flexbox, показане тут :( https://philipwalton.github.io / вирішено-на-flexbox / демо-версії / 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/


Це насправді погане рішення, оскільки колонтитул прикриває основний вміст, коли вони зустрічаються. Потрібно встановити padding-bottomосновний контейнер вмісту рівним висоті нижнього колонтитула. І робити це потрібно динамічно на сторінці loadта resizeподіях, а також у нижньому колонтитулі DOMSubtreeModified.
дао

9

Для людей, які все ще борються, і відповідь, що відповідає, працює не так, як ви цього хочете, ось найпростіше рішення, яке я знайшов.

Оберніть основний вміст і призначте йому мінімальну висоту перегляду. Пристосуйте 60 до будь-якої цінності, яка потрібна вашому стилю.

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

Ось і це працює досить добре.


У мене було те саме питання, що і в питанні. Спробувавши майже всі високо оцінені відповіді тут, це був єдиний, хто працював на мене. І він працював у всіх розмірах. Тільки зміна, яку я зробив, була "мінімальна висота: 70Вт". Це залежатиме від розмірів заголовка та колонтитула вашого веб-сайту.
Арфат

Це повинно бути вище, працює точно так, як потрібно.
ям

Це працювало для моїх потреб. Просто налаштуйте значення мінімальної висоти, поки не отримаєте бажаний результат.
sawyerrken

Чудово, це найпростіше та ефективне рішення проблеми розміщення колонтитулів!
Прахлад Ери

5

Гален Гідман виклав дійсно гарне рішення проблеми чутливого нижнього колонтитула, який не має фіксованої висоти. Ви можете знайти його повне рішення на його блозі: http://galengidman.com/2014/03/25/responsive-f prilagod-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%; }

Це здається сумісним з завантажувальним інструментом, і тому повинна бути прийнята відповідь, імхо. Це не ідеально, оскільки, здається, горизонтальна смуга прокрутки.
Флоріан Мертенс

Флоріан: Для мене немає горизонтальної смуги прокрутки.
Навряд чи помітно

4

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


Основний недолік рішень вище - вони мають фіксовану висоту нижнього колонтитулу.
І це просто не вирізає це в реальному світі, де люди використовують мільйонну кількість пристроїв і мають цю шкідливу звичку обертати їх, коли ви найменше цього очікуєте і ** Poof! ** туди йде нижній вміст вашої сторінки за колонтитулом!

У реальному світі вам потрібна функція, яка обчислює висоту нижнього колонтитулу і динамічно налаштовує вміст сторінки padding-bottomдля розміщення цієї висоти. І вам потрібно запустити цю крихітну функцію на сторінці loadта resizeподіях, а також на нижньому колонтитулі DOMSubtreeModified(про всяк випадок, якщо ваш колонтитул динамічно оновлюється асинхронно або містить анімовані елементи, що змінюють розмір при взаємодії з ним).

Ось доказ концепції, використовуючи jQuery v3.0.0і Bootstrap v4-alpha, але немає причини, чому вона не повинна працювати на нижчих версіях кожної.

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

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


Пізніше редагуйте (через 3 роки після первинної відповіді):

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

Ось:


3

Цей метод використовує мінімальну розмітку. Просто помістіть увесь ваш вміст у .wrapper, який має нижню частину нижнього та негативного поля, рівну висоті нижнього колонтитулу (у моєму прикладі 100 пікселів).

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>

2

Або це

<footer class="navbar navbar-default navbar-fixed-bottom">
    <p class="text-muted" align="center">This is a footer</p>
</footer>

1

Для завантажувальної програми:

<div class="navbar-fixed-bottom row-fluid">
  <div class="navbar-inner">
    <div class="container">
      Text
    </div>
  </div>
</div>

2
У питанні конкретно зазначено, що navbar-fixed-bottomНЕ є тим, що вирішує проблему.
p4sh4

1

Жодне з цих рішень точно не працювало для мене ідеально, тому що я використовував навбар-інверсний клас у своєму колонтитулі. Але я отримав рішення, яке працювало і без JavaScript. Використовується Chrome для формування медіа-запитів. Висота нижнього колонтитула змінюється в міру зміни розміру екрана, тому вам потрібно звернути на це увагу і відповідно відрегулювати його. Вміст нижнього колонтитула (я встановив id = "footer" для визначення мого вмісту) повинен використовувати postion = absolut та bottom = 0, щоб зберегти його внизу. Також ширина: 100%. Ось мій CSS з медіа-запитами. Вам доведеться відрегулювати міні-ширину та максимальну ширину та додати або видалити деякі елементи:

#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; 
    }
}

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.