Нижний колонтитул не прилипает к нижней части

Question

Нижний колонтитул не прилипает к нижней части

0

здесь мой плункер: http://plnkr.co/edit/HSVBuzzp1IIDjFdbuf4E?p=preview

Короче говоря: я не могу найти способ разместить нижний колонтитул внизу страницы.

Я попытался просто полагаться на html:

<footer></footer>

Я пробовал использовать bootstrap ui class:

<div class="modal-footer">

или

<div id="footer">
   <div class="container">
    ...
</div>

но ничего... Он просто не работает...

Phate 09 июль 2015, в 13:02

Источник

Теги:

angularjs

angular-ui

angular-ui-bootstrap

1 ответ

Ещё вопросы

Kop4lyf · Accepted Answer · 2015-07-09T07-45-00.000Z

Проверьте это: http://plnkr.co/edit/caLGN05wzH3Ls2PcRoTe?p=preview

html, body {
  height: 100%;
}

.modal-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

Я добавил еще несколько css в начало страницы. Во-первых, если вы просматриваете страницу, длина тела составляет только половину страницы. Поэтому мы должны дать ему высоту 100%, чтобы она занимала всю страницу.

Во-вторых, чтобы разместить нижний колонтитул в нижней части страницы, нам нужно поместить его как абсолютное, чтобы он выравнивался с его первым позиционированным родителем (в этом случае ни один, поскольку мы не указали позицию ни на какой другой элемент), а затем вы может указывать нижний как 0 так, чтобы он придерживался нижней.

Это нормальный способ, которым мы можем поставить нижний колонтитул внизу. Вы можете проверить, может ли bootstrap иметь что-то встроенное.

Надеюсь это поможет.

Да, это работает, но теперь прямая линия, ограничивающая сам нижний колонтитул, просто останавливается на полпути.
Это проблема ширины, так как мы не указали ширину. Вам нужно установить ширину нижнего колонтитула на 100%. Смотрите модифицированный CSS выше.