2

Добрый день! Видел много подобных вопросов, но проблема вот в чем. Есть footer со стилями

.footer {
	position: static;
	bottom: 0px;
	padding: 10px;
	width: 100%;
    text-align: center;
	background: #262d33;
}


.footer p,ul,li,a{
	list-style-type: none;
	padding: 0px;
	line-height: 7px;
	font-weight: bold;
	color: #97bcce;
}
<div class="footer">
    <div class="container-fluid">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-3 footer_1">
            <p>Наши услуги</p><br/>
            <ul>
              <li><a href="http://www.mypravo.kz/registration/">Регистрация бизнеса</a></li><br/>
              <li><a href="http://www.mypravo.kz/yurist/">Юридическое сопровождение</a></li><br/>
              <li><a href="http://www.mypravo.kz/licenzii/">Лицензирование в строительстве</a></li><br/>
              <li><a href="http://www.mypravo.kz/too_s_licenziey/">Продажа компаний</a></li><br/>
              <li><a href="http://www.mypravo.kz/buhgalter/">Бухгалтерское сопровождение</a></li><br/>
              <li><a href="http://www.mypravo.kz/predstavitelstvo/">Представительство в суде</a></li><br/>
            </ul>
          </div>
          <div class="col-md-6 footer_2">
            <p>ЮРИДИЧЕСКАЯ КОМПАНИЯ</p>
            <p>ИНТЕРПРАВO</p>
            <p>С 2009 года на рынке юридических услуг</p>
          </div>
          <div class="col-md-3 footer_3">
            <div class="row">
              <div class="col-md-12">
                <a href="tel:+77051350000">+7(705)1350000</a><br/>
                <i class="fa fa-skype fa-lg" aria-hidden="true"></i>
                <i class="fa fa-whatsapp fa-lg" aria-hidden="true"></i>
                <i class="fa fa-telegram fa-lg" aria-hidden="true"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
Как это все выглядит Если поставить в стилях position: absolute, при уменьшении окна футер начинает наезжать на блок content и перекрывает его. Подскажите как это возможно исправить? Спасибо!

1

2 ответа 2

2

На сайтах обычно делают так, чтобы боди был разделен на два огромных блока: мейн-контент и футер.

К мейн контенту в стилях пишут: flex: 1 0 auto;

к футеру: flex: 0 0 auto;

и к их обертке (боди):

display: flex;
flex-direction: column;
height: 100vh;

и все волшебным образом встает на свои места (не забывай для IE добавить префиксы: -ms-flex: 1 0 auto; рекомендую этот сервис на первое время https://autoprefixer.github.io/ru/)

3
  • Не помогло, footer прижимается к content А под footer свободное пространство 26 июл 2017 в 11:56
  • 1
    height: 100vh; попробуй, вместо 100% Это моя ошибка
    – Agni Kai
    26 июл 2017 в 12:56
  • Спасибо получилось! 27 июл 2017 в 4:03
0

Если без flex, то footer ставят position : fixed;

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