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

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

Упрощенный условный html такой: блок контента, под ним футер. Футер прибит книзу страницы.
Футер должен быть виден всегда, а блок контента должен быть высотой со страницу минус высота футера, при переполнении скроллится. Т.е. не страница целиком скроллится, а контентный блок.
Пока кроме как вычислять высоту контента через js (в т.ч. при ресайзе), идей нет.
Буду благодарен, если подскажете, можно ли такое реализовать на чистом css и как.
  • Вопрос задан
  • 346 просмотров
Комментировать
Подписаться 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 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Elevenlabs генерация голоса
23 дек. 2024, в 14:10
10000 руб./за проект
Добработать/переработать сайт на Modx Evolution (II)
23 дек. 2024, в 14:06
1000 руб./за проект
Выездной debian сисадмин - разовая акция в Нижнем Новгороде
23 дек. 2024, в 13:43
5000 руб./в час
Ещё заказы