Есть футер, в нём горизонтальный ряд иконок. При наведении на футер, его высота изменяется и под иконками появляются подписи, используются :hover, overflow: hidden и transform, высота футера до и после трансформации известна.
- Футер прикреплён к низу экрана, не страницы;
- Если высота контента меньше области контента, то при наведении на футер общая высота страницы не изменяется;
- Область контента при необходимости может листаться горизонтально и вертикально;
- Поддержка последними версиями мобильных браузеров;
- Отсутствие javascript.
Код футера на данный момент:
.bar {
height: 3.9em;
width: 100%;
padding-top: 0.5em;
background-color: lightgray;
overflow: hidden;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.bar:hover {
height: 5.4em;
}
...
<body>
<div style="height: 100%; background-color: red;">
<!-- фон-->
<div style="width: 100%; overflow: auto; background-color: blue;">
<!-- область контента-->
</div>
<div class="bar">
<!-- кнопки-->
</div>
</div>
</body>
Средний
