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

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

Упрощенный условный html такой: блок контента, под ним футер. Футер прибит книзу страницы.
Футер должен быть виден всегда, а блок контента должен быть высотой со страницу минус высота футера, при переполнении скроллится. Т.е. не страница целиком скроллится, а контентный блок.
Пока кроме как вычислять высоту контента через js (в т.ч. при ресайзе), идей нет.
Буду благодарен, если подскажете, можно ли такое реализовать на чистом css и как.
  • Вопрос задан
  • 335 просмотров
Комментировать
Подписаться 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
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 140 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать веб-ресурс для анкетирования пользователей на Python/C#
06 мая 2024, в 22:50
40000 руб./за проект
Скопировать верстку лендинга с доработками
06 мая 2024, в 22:07
3000 руб./за проект
Скопировать дизайн со скриншотов с небольшими правками в figma
06 мая 2024, в 21:43
1500 руб./за проект
Ещё заказы