Слава Україні!
Как прижать футер к низу страницы?
Базовая разметка 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 по 14.07
втрати противника
орієнтовно склали:
втрати противника
орієнтовно склали:
1421810 ( +1120 )
особового складу
12131 ( +6 )
танків
24932 ( +1 )
бойових бронемашин
45911 ( +46 )
артилерійських систем
1931 ( +2 )
РСЗВ
1491 ( +2 )
засоби ППО
437 ( +0 )
літаків
353 ( +0 )
гелікоптерів
119862 ( +330 )
автомобільної техніки
33 ( +0 )
кораблі / катери
4899 ( +3 )
крилаті ракети
407201 ( +1508 )
БПЛА
4416 ( +4 )
спец. техніки
1905 ( +11 )
установок ОТРК/ТРК
2 ( +0 )
підводні човни