Задать вопрос
@gerasim9
html

Как сделать блок контента с динамической высотой при постоянном хедере и футере?

Упрощенный условный html такой: блок контента, под ним футер. Футер прибит книзу страницы.
Футер должен быть виден всегда, а блок контента должен быть высотой со страницу минус высота футера, при переполнении скроллится. Т.е. не страница целиком скроллится, а контентный блок.
Пока кроме как вычислять высоту контента через js (в т.ч. при ресайзе), идей нет.
Буду благодарен, если подскажете, можно ли такое реализовать на чистом css и как.
  • Вопрос задан
  • 345 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
@timfcsm 
<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .wrapper {
      padding-bottom: 155px;
    }
    footer, .push-footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      background: #fff;
      height: 155px;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <header>header</header>
    <div class="content"></div>
  </div>
  <footer>footer</footer>
</body>
</html>
Ответ написан
5 комментариев
5 комментариев
Пригласить эксперта
Ответы на вопрос 1
mvchalov
@mvchalov
Заслуженный JS-костылеограф
Например, вот так: codepen.io/mvchalov/full/JGKQvw
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сделать бэкап сайта(форума) и установить его на сервер
23 нояб. 2024, в 04:31
2000 руб./за проект
Смонтировать видео
23 нояб. 2024, в 01:31
1000 руб./за проект
Настроить сайт
23 нояб. 2024, в 00:16
2000 руб./за проект
Ещё заказы