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 that you have read and understand our privacy policy and code of conduct.

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