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 и перекрывает его. Подскажите как это возможно исправить? Спасибо!

Дмитрий
  • 149
  • 2
  • 12

2 Answers2

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/)

Agni Kai
  • 73
0

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

KAGG Design
  • 35,238