Слава Україні!
Как прижать футер к низу страницы?
Базовая разметка HTML страницы
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>
1. Позиционирование.
Стили CSS
html { height: 100%; }
body {
min-height: 100%;
position: relative;
padding-bottom: 120px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
}
2. Flex.
Стили CSS
body {
height: 100vh;
display: flex;
flex-direction: column;
}
header { flex-shrink: 0; } /* запрещает сжиматься */
main { flex-grow: 1; } /* разрешает растягиваться */
footer { flex-shrink: 0; }
3. Grid.
Стили CSS
html { height: 100%; }
body {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
Важлива інформація
Міністерство оборони
України
України
з 24.02 по 15.03
втрати противника
орієнтовно склали:
втрати противника
орієнтовно склали:
1279170 ( +740 )
особового складу
11781 ( +4 )
танків
24213 ( +1 )
бойових бронемашин
38438 ( +17 )
артилерійських систем
1686 ( +0 )
РСЗВ
1332 ( +0 )
засоби ППО
435 ( +0 )
літаків
349 ( +0 )
гелікоптерів
83513 ( +110 )
автомобільної техніки
32 ( +1 )
кораблі / катери
4468 ( +65 )
крилаті ракети
179270 ( +1984 )
БПЛА
4089 ( +1 )
спец. техніки
4 ( +0 )
установок ОТРК/ТРК
2 ( +0 )
підводні човни