Я делаю скользящую навигационную панель без использования JavaScript.
Все работает отлично, за исключением одного: когда divs попадают в их конечную позицию (на 100% ключевого кадра), левый div подталкивает верхний div к нижней части документа.
Я пробовал позицию: абсолютный, но это было бесполезно. Я попробовал, оставив ширину div равной 6%, а верхняя ширина divs установлена на 94%, но когда пользователь сжимает свой браузер, он мгновенно ломается.
HTML:
<div id="left_bar"><p>This is sparta!</p></div>
<div class="top_bar">This is not Sparta!</div>
CSS:
/* LEFT SIDEBAR*/
#left_bar {
-webkit-animation:myFirst 3s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
font-size: .2px;
padding-left: 5px;
float: left
}
/* LEFT SIDEBAR ANIMATION*/
@-webkit-keyframes myFirst /* Safari and Chrome */{
0% {
background: orange;
width: 6%;
height: 0px;
margin-top: 100%;
}
100% {
background:orange;
width: 6%;
height: 100%;
opacity: 0.7;
font-size: 16px;
}
}
/* TOP SIDEBAR*/
.top_bar {
background-color: black;
-webkit-animation:mySecond 3s;
-webkit-animation-fill-mode: forwards;
float: right;
}
/* TOP SIDEBAR ANIMATION*/
@-webkit-keyframes mySecond /* Safari and Chrome */{
0% {
background: orange;
width: 0%;
height: 8%;
}
100% {
background:orange;
width: 94%;
height: 8%;
opacity: 0.7;
}
}
jsFiddle ПРИМЕЧАНИЕ: jsFiddle делает его совершенно другим. левая боковая панель не занимает 100% высоты, но когда верхняя боковая панель занимает 94% страницы, она показывает верхний прыжок в строке под левой боковой панелью.
Проблема заключается в том, что у вас есть padding-left:5px;
на #left_bar
. Удалите его, и ваша проблема исправлена
Альтернативным достаточным решением было бы использовать calc
для сокращения с шириной одного из них на ту же сумму
@-webkit-keyframes mySecond {
...
100% {
width: calc(94% - 5px);
...
}
}