Слава Україні!
Как прижать футер к низу страницы?
Базовая разметка 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 по 24.06
втрати противника
орієнтовно склали:
втрати противника
орієнтовно склали:
1013700 ( +1200 )
особового складу
10966 ( +1 )
танків
22879 ( +7 )
бойових бронемашин
29511 ( +21 )
артилерійських систем
1424 ( +1 )
РСЗВ
1188 ( +0 )
засоби ППО
416 ( +0 )
літаків
337 ( +0 )
гелікоптерів
52961 ( +100 )
автомобільної техніки
28 ( +0 )
кораблі / катери
3388 ( +12 )
крилаті ракети
41915 ( +198 )
БПЛА
3920 ( +0 )
спец. техніки
4 ( +0 )
установок ОТРК/ТРК
1 ( +0 )
підводні човни