Слава Україні!
Как прижать футер к низу страницы?
Базовая разметка 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 по 08.11
втрати противника
орієнтовно склали:
втрати противника
орієнтовно склали:
1150100 ( +1190 )
особового складу
11330 ( +0 )
танків
23544 ( +1 )
бойових бронемашин
34321 ( +20 )
артилерійських систем
1538 ( +3 )
РСЗВ
1239 ( +1 )
засоби ППО
428 ( +0 )
літаків
347 ( +1 )
гелікоптерів
66795 ( +72 )
автомобільної техніки
28 ( +0 )
кораблі / катери
3918 ( +0 )
крилаті ракети
78928 ( +250 )
БПЛА
3993 ( +0 )
спец. техніки
4 ( +0 )
установок ОТРК/ТРК
1 ( +0 )
підводні човни