1

На сайте есть несколько страниц, на которых мало информации, и нужно приклеить футер к низу страницы. Перепробовал много способов, но всегда есть проблема с background страницы. Получаеться ситуация как на рис. 1, а нужно чтоб было как на рис 2. И высота футера неизвестна, так как меняеться изминением размера страницы

Рис. 1

Рис. 1

Рис. 2

Рис. 2

1

2 ответа 2

3

Про FlexBox: на русском и английском

Поддержка FlexBox caniuse.com

Поддержка FlexBox

Способ 1

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  height: 100%;
}
header {
  min-height: 100px;
  background-color: #00f;
}
main {
  -webkit-box-flex: 1;
  -webkit-flex: 1 auto;
      -ms-flex: 1 auto;
          flex: 1 auto;
  min-height: 250px;
  background-color: #ffc0cb;
}
footer {
  min-height: 100px;
  background-color: #00f;
}
header,
main,
footer {
  width: 80%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: auto;
  font-size: 2em;
  text-transform: uppercase;
}
<header>
  header
</header>
<main>content</main>
<footer>
  footer
</footer>


Про Css Calc Поддержка Calc - caniuse

Способ 2

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
}
header,
main,
footer {
  width: 100%;
  text-align: center;
  vertical-align: bottom;
}
header,
footer {
  min-height: 100px;
  background-color: #00f;
}
main {
  height: calc(100% - 200px);
  min-height: 250px;
  background-color: #ffc0cb;
}
<header>
  header
</header>
<main>content</main>
<footer>
  footer
</footer>

2
  • в обеих случчаях нужно знать высоту футера,да?
    – Wepster
    22 фев 2016 в 18:04
  • @Wepster через flex не нужно, через calc высота должна быть фиксированным 22 фев 2016 в 18:06
-1

например позиционируешь подвал position:absolute; и ставишь left:0; bottom:0;

background-size:cover; для бэкграунда

4
  • content не тянется. 22 фев 2016 в 15:38
  • @ Jean-Claude min-height пробовал для контента?
    – urbanlol
    22 фев 2016 в 15:40
  • например, min-height 50vh... ну или по ситуации, если не использовать flexbox.
    – NeedH8
    22 фев 2016 в 15:44
  • И высота футера неизвестна, так как меняеться изминением размера страницы
    – Wepster
    22 фев 2016 в 15:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.