Условие
В style.css соберите макет на вложенном flex. Страница .page - колонка на всю высоту окна. В шапке: Logo слева, «Войти» справа. Тело растёт и кладёт сайдбар (~140px) рядом с контентом. Подвал остаётся внизу страницы. У вас должно получиться так же, как во вкладке «Результат» - смотрите там конкретный итог задания.
Что нужно сделать
- Сделайте
.pageколонкой на всю высоту окна. - В шапке разведите Logo и кнопку по краям.
- В теле страницы: узкий сайдбар и растягивающийся контент; подвал внизу.
Подсказка для новичка
Это два flex-контейнера: страница - колонка, тело - ряд. Тело забирает оставшуюся высоту - поэтому подвал «прилипает» вниз. Свойства - в «Дополнительной информации».
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Страница на всю высоту · сайдбар и подвал
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Свойства этой задачи
<!DOCTYPE html>- документ HTML5.<html lang="ru">/<head>/<meta charset="UTF-8" />/<title>/<link rel="stylesheet" href="style.css" />- шапка документа.<body>- видимое содержимое.<div class="page">- колонка на всю высоту окна.<header class="header">- шапка с.logoи<button class="btn">.<div class="body">- ряд:<aside class="sidebar">+<main class="content">.<footer class="footer">- подвал внизу.display: flex,flex-direction: column,min-height: 100vh,justify-content: space-between,flex: 1,flex-shrink: 0- раскладка.
Слева два файла: style.css (здесь решаете задание) и index.html (готовая разметка, менять не нужно). Ниже - разбор стилей и важных деталей задачи.
Файл style.css - что уже написано
Стилизованы
body,
фон
.page,
вид
.header,
.btn,
.sidebar,
.content,
.footer.
Flex-структуры ещё нет.
Правило body и .page
-
body:margin: 0,font-family: Arial, sans-serif. -
.pageуже имеетbackground: #e2e8f0. В решении:display: flex,flex-direction: column,min-height: 100vh- колонка минимум на высоту окна, подвал «прилипает» вниз.
Правила шапки, середины и подвала
-
.header-height: 56px,padding: 0 16px, тёмный фон#1e293b, белый жирный текст. В решении:display: flex,justify-content: space-between,align-items: center(Logo слева, кнопка справа). -
.btn-padding: 8px 12px, синий фон, белый текст,border: 0,font-weight: 700. -
.bodyв старте без стилей; в решении:display: flex(ряд) иflex: 1(занять оставшуюся высоту между шапкой и подвалом). -
.sidebar- фон#334155, белый текст,padding: 16px; в решенииwidth: 140pxиflex-shrink: 0(не сжимать уже заданную ширину). -
.content- фон#f8fafc,padding: 16px; в решенииflex: 1(растянуть по ширине). -
.footer-height: 48px, фон#0f172a, белый текст,text-align: center,line-height: 48px.
Вложенный Flexbox
Снаружи
.page
- колонка на
100vh.
Внутри шапка - горизонтальный flex с
space-between.
Блок
.body
с
flex: 1
растягивается по высоте и сам становится flex-рядом: сайдбар фиксированной ширины + контент.
Подвал остаётся внизу колонки.
Коротко: колонка
.page
на
100vh,
шапка
space-between,
.body
с
flex: 1,
сайдбар 140px без сжатия, контент
flex: 1.
Сверьте с вкладкой
«Результат».