gpt4 book ai didi

html - 如何将 100% 高度设置为动画 div

转载 作者:太空宇宙 更新时间:2023-11-04 14:21:54 24 4
gpt4 key购买 nike

我正在研究 CSS 动画,因为它们非常棒。

我正在尝试在页面左侧制作一个导航栏。我希望栏占据页面高度的 100%,但是当我为高度设置该属性时,我的栏不再出现在页面上。 CSS 动画不适用于基于 % 的高度和宽度吗?

我的 CSS:

body{
overflow: hidden;
padding: 0;
overflow-x: hidden
}
div {
-webkit-animation:myfirst 4s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
font-size: .2px;
padding-left: 5px;
}
@-webkit-keyframes myfirst /* Safari and Chrome */{
0% {
background:orange;
width: 100px;
height: 100px;
-webkit-transform:rotate(360deg);
opacity: 0.7;
}
100% {
background:orange;
width: 100px;
height: 100%;
-webkit-transform:rotate(360deg);
opacity: 0.7;
font-size: 16px;
}

HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/sidebar_left.css">
</head>
<body>

<div></div>

</body>
</html>

jsFiddle

最佳答案

将元素高度设置为 100% 页面高度 - 它的直接父元素应该是 body 元素,bodyhtml 元素也需要有高度100%...如果您的元素进一步嵌套在 dom 中,您也可以为其所有父元素和父元素的父元素继续 100% 高度链...等等

关于html - 如何将 100% 高度设置为动画 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19861863/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com