Зробіть нижній колонтитул нижньою частиною сторінки за допомогою Twitter Bootstrap

75

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

Я поклав усі свої сторінки в "тримач"

#holder {
  min-height: 100%;
  position:relative;
}

А потім використав наступний CSS для мого колонтитула

ul.footer {
  margin-top: 10px;
  text-align: center;
}

ul.footer li {
  color: #333;
  display: inline-block;
}

#footer {
  bottom: -50px;
  height: 50px;
  left: 0;
  position: absolute;
  right: 0;
}

Html для мого колонтитула

<div class="container">
  <div class="row">
    <div class="span12">
      <div id="footer">
        <ul class="footer">
          <li>Website built by <a href="#">Fishplate</a></li>&nbsp;&nbsp;
          <li>Email:exampleemail@gmail.com</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Я хотів би підтримувати рідину нижнього колонтитула.

css twitter-bootstrap

— Річлевіс
джерело

1

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

— jakee

дякую за відповідь, що може бути рішенням, щоб обійти це?

— Річлевіс,

Або

— розмістіть

Це може бути те, що ви шукаєте stackoverflow.com/q/8824831/681807

— Моя голова болить

@MyHeadHurts, це твоє рішення, яке я використовую, трохи подумай, що зараз у мене можуть виникнути проблеми, оскільки я помістив нижній колонтитул у контейнер, рядок і проміжок 12

— Richlewis

44

Як обговорювалося в коментарях, ви базували свій код на цьому рішенні: https://stackoverflow.com/a/8825714/681807

Однією з ключових частин цього рішення є додавання height: 100%до, html, bodyщоб #footerелемент мав базову висоту для роботи - вона відсутня у вашому коді:

html,body{
    height: 100%
}

Ви також виявите, що зіткнетеся з проблемами з використанням, bottom: -50pxоскільки це буде штовхати ваш вміст під складку, коли вмісту мало. Вам доведеться додати margin-bottom: 50pxдо останнього елемента перед #footer.

— У мене болить голова
джерело

Велике спасибі, я думав, що html, зріст тіла був встановлений, здається, його не було, також змінено дно і вуаля. Ще раз спасибі

— Richlewis

вибачаюся, що запитую ще раз, але я зараз помітив, коли область перегляду зменшилась, щоб сказати розмір iphone, текст нижнього колонтитула перекривається вмістом? будь-які ідеї?

— Річлевіс,

Нема проблем. Ви подаєте заявку margin-bottom: 50pxна останній вміст перед колонтитулом? Якщо ви працюєте, і це не працює, можливо, вам доведеться збільшити це значення для iPhone (не впевнений, чому б це зробив, але це може бути так). Ви можете зробити це за допомогою медіа-запитів CSS

— My Head Hurts

1

Я бачу свою помилку, я не застосовував margin-bottom: 50px до вмісту до нижнього колонтитула, як ви сказали, встановіть знизу 0 і тепер добре, немає необхідності в медіа-запиті ... PHEW !!!

— Річлевіс,

Це одне чудове виправлення;

— Ryu_hayabusa

94

просто додайте до нижнього колонтитула панель навігації з фіксованим дном.

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

Оновлення для Bootstrap 4 -

як згадала Сара Тіббеттс - клас має фіксоване дно

<div class="footer fixed-bottom">

— Джон
джерело

12

Це створило заморожений нижній колонтитул, під яким прокручується вміст. Мені чогось не вистачає? Дякую.

— scharfmn

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

— Джон

також добре зауважити, що якщо у вас JS генерує dom ng-repeatв angular ... вам потрібно буде надіти margin-bottomобгортку для згенерованих елементів, що дорівнює висоті липкого колонтитула ... bootstrap put-margin top на нижньому колонтитулі, але margin -top не застосовуватиметься до згенерованого dom, і ви опинитеся внизу згенерованого dom will під колонтитулом.

— Бенджамін Конант

Дякую! Працював у мене!

— FlokiTheFisherman

4

Станом на Bootstrap 4, замість navbar-fixed-bottomцього простоfixed-bottom

— Сара

12

Більшість згаданих вище рішень не працювали для мене. Однак нижче подане рішення працює чудово:

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

Джерело

— Чорна Борода
джерело

3

Працює, але перезаписує вміст

— Рамі Аллуш,

У мене все працювало нормально

— Озан Ясін Доган

8

http://bootstrapfooter.codeplex.com/

Це має вирішити вашу проблему.

<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">
Your content here.
</div>
</div>
</div>
</div>
<footer class="footer" style="background-color:#c2c2c2">
</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;
color:#fff;
}

— вітер
джерело

дякую, що робить @renderbody (), я вже пробував це рішення і фактично отримую @renderbody () як html?

— Річлевіс,

Ігноруйте цю частину - це просто функція, яка викликає вміст тіла з інших елементів керування.

— easwee

6

Ось приклад використання 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>

скрипка

— Віктор
джерело

Фантастичне використання вапна. На жаль, все ще проблема в 2017 році із користувацькими сайтами, які використовують певну функціональність завантаження

— soulshined

6

Використовуйте класи бутстрапа на свою користь. navbar-static-bottomзалишає його внизу.

<div class="navbar-static-bottom" id="footer"></div>

— Ентузіаст кодування
джерело

1

Цього можна легко досягти за допомогою CSS flex. Розмітка HTML наступним чином:

<html>
    <body>
        <div class="container"></div>
        <div class="footer"></div>
    </body>
</html>

Слід використовувати наступний CSS:

html {
    height: 100%;
}
body {
    min-height: 100%;
   display: flex;
   flex-direction: column;
}
body > .container {
    flex-grow: 1;
}

Ось CodePen, з яким можна грати: https://codepen.io/webdevchars/pen/GPBqWZ

— Даміан Чапієвський
джерело