Как прижать подвал в адпаптивном макете

238

22 июня 2017, 02:57

footer страницы никак не ограничен по высоте, а при уменьшении экрана содержимое подвала перемещается вниз. Как сделать чтобы на всех экранах он был прижат, но при этом вел себя правильно(н-р не перекрывал контент)

Answer 1

Все просто:

* { 
  margin: 0; 
  padding: 0; 
} 
html, 
body { 
  height: 100%; 
} 
.wrapper { 
  display: flex; 
  flex-direction: column; 
  height: 100%; 
} 
.content { 
  flex: 1 0 auto; 
} 
.footer { 
  flex: none; 
  background: red; 
}

<html lang="en"> 
<head> 
  <meta charset="UTF-8" /> 
  <title>flex</title> 
</head> 
<body> 
 <div class="wrapper"> 
  <div class="content">flex-content</div> 
   <div class="footer"> 
    Lorem ipsum dolor. 
    <br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus illo distinctio, ex fugit similique est! Itaque atque, pariatur necessitatibus amet. Illo incidunt, voluptatibus sunt voluptatem, dolorum sequi vitae eligendi fugit, dicta explicabo, sapiente tenetur unde saepe! Similique culpa, deleniti, quibusdam architecto, dignissimos placeat quae accusantium, libero voluptatem officiis repudiandae rerum! 
  </div> 
</div> 
 
</body> 
</html>

Answer 2

Еще вариант (высота футера определяется автоматически)

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
 
html, 
body { 
    height: 100%; 
} 
 
.page-wrapper { 
    display: table; 
    height: 100%; 
    width: 100%; 
} 
 
.page-content { 
    display: table-row; 
    height: 100%; 
} 
 
.page-footer { 
    padding: 15px; 
    background: #333; 
    color: #fff; 
    text-align: center; 
}

<div class="page-wrapper"> 
    <section class="page-content"> 
        content 
    </section> 
    <footer class="page-footer"> 
        footer 
    </footer> 
</div>

Создание интернет-магазина спортивных товаров в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Множественное подключение GMap API

Есть ли возможность у GMaps API одновременно использовать 2 API keys одновременно на сайте? У меня есть определенная проблема в совместимости плагина...

323

HTML

Редактирование Яндекс.Карт

Можно ли редактировать/кастомизировать бесплатную версию ЯндексКарт на сайте?Например, изменить цвет фона или изменить кнопки

242

HTML

dropdown menu следует

Привет всем! После некоторых манипуляций в css, которые по сути его не касались, dropdown menu при нажатии на него и последующем скроле следует за экраном,...

204

HTML

сайт “дергается” при загрузке

здравствуйте, есть сайт с контейнером, внутри него content с float: left и с правой стороны nav с float: right вообщем стандартная схема

279