[Перевод] Современные решения старых CSS-задач (1 часть): Удержание футера внизу страницы

Скрипты и советы | 21 июля 2020 1 337

Уроки CSS на Хабрахабре, habrahabr.ru, Разработка веб-сайтов, CSS, HTML, Web Development, frontend, html, layout, вёрстка, разработка веб-сайтов,

Приветствую. Представляю вашему вниманию перевод статьи «Keep the Footer at the Bottom: Flexbox vs. Grid», опубликованной 8 апреля 2020 года автором Stephanie Eckles



Это первая статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика.


В течение многих лет я регулярно возвращалась к этой статье Matthew James Taylor за способом удержания футера страницы в нижней её части, даже если высота основного содержимого меньше высоты окна. Данный метод основывался на явном задании высоты футера, что являлось не масштабируемым, но очень хорошим решением (до появления Flexbox).

Читать дальше →

Источник: Уроки CSS на Хабрахабре

[Перевод] Современные решения старых CSS-задач (2 часть): Элементы одинаковой высоты: Flexbox vs Grid

Приветствую. Представляю вашему вниманию перевод статьи «Equal Height Elements: Flexbox vs. Grid», опубликованной 9...

Подробнее
[Перевод] Современные решения старых CSS-задач (3 часть): Масштабирование изображений на CSS

Приветствую. Представляю вашему вниманию перевод статьи «CSS-Only Full-Width Responsive Images 2 Ways», опубликованной...

Подробнее
[Перевод] Нововведения CSS – Июль 2020 (Gap, Aspect ratio, Masonry, Subgrid)

Приветствую. Представляю вашему вниманию перевод статьи «CSS News July 2020», опубликованной 7 июля 2020 года автором...

Подробнее
[Перевод] Отзывчивый веб-дизайн и учёт высоты окна браузера

Знаю, что у многих появится вопрос о том, почему у этой статьи такой необычный заголовок. Как связаны «отзывчивый...

Подробнее
[Перевод] Понимание CSS Grid (3 часть): Grid-области

Приветствую! Представляю вашему вниманию перевод статьи «Understanding CSS Grid: Grid Template Areas» автора Rachel...

Подробнее
[Перевод] Примеры использования Flexbox

Продолжаю публикацию статей Rachel Andrew по особенностям CSS-технологии Flexbox Предыдущие статьи цикла: Что...

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями