Javascript 如何在图元不超出父边界的情况下转换高度？
我正在尝试进行一个转换，从顶部的所有内容开始，在页面加载后，内容慢慢向下扩展 我已经让它的大部分工作，除了当内容向下扩展页面，它不断扩大的方式以外的父母的边界。我将所有元素都设置为扩展到100%，所以我认为扩展元素只会扩展到其父元素大小的100%，但它会一直向下扩展 也许我只是误解了父母/孩子身高百分比的工作原理。有人能指出我做错了什么吗？谢谢 以下是HTML代码：Javascript 如何在图元不超出父边界的情况下转换高度？,javascript,html,css,css-transitions,Javascript,Html,Css,Css Transitions,我正在尝试进行一个转换，从顶部的所有内容开始，在页面加载后，内容慢慢向下扩展 我已经让它的大部分工作，除了当内容向下扩展页面，它不断扩大的方式以外的父母的边界。我将所有元素都设置为扩展到100%，所以我认为扩展元素只会扩展到其父元素大小的100%，但它会一直向下扩展 也许我只是误解了父母/孩子身高百分比的工作原理。有人能指出我做错了什么吗？谢谢 以下是HTML代码： <body> <div id="outer"> <div class="m
<body>
<div id="outer">
<div class="middle">
<div class="inner">
<h3>A-B</h3>
<ul>
<li>A</li>
<li>B</li>
</ul>
</div>
<div class="inner">
<h3>C-G</h3>
<ul>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
</div>
<div class="inner">
<h3>H</h3>
<ul>
<li>H</li>
</ul>
</div>
</div>
</div>
</body>
html {
height: 100%;
}
body {
height: 100%;
}
#outer {
height: 100%;
}
.middle {
border: solid 2px black;
height: 100%;
}
.inner {
height: 0%;
transition: height 5s 2s;
-moz-transition: height 5s 2s;
-webkit-transition: height 5s 2s;
-o-transition: height 5s 2s;
}
#outer.loaded .inner {
height: 100%;
}
百分比基于父级。您正在设置三个级别。内部到高度为100%。这意味着总高度是300%。将.inner设置为33%更为合理 编辑
出于兴趣，我在这里找到了另一篇文章，这篇文章可能会对您的尝试有所帮助，即从“过渡高度0”到“过渡高度自动”，这实际上涉及到将“最大高度”设置为一个非常大的数字（至少比其“自动高度”大），因此无论如何只能过渡到“自动” 百分比基于父级。您正在设置三个级别。内部到高度为100%。这意味着总高度是300%。将.inner设置为33%会更合理我认为当一切都设置为100%时，他们会平均分配空间。我想它不是那样工作的。不，它不是那样工作的。有没有办法让它们自动分割并平滑过渡？我试着设置自动，但它从顶部开始，直接跳到完全扩展。我唯一能想到的方法是让javascript参与进来，计算出高度并将其设置为百分比，然后启动CSS转换
html {
height: 100%;
}
body {
height: 100%;
}
#outer {
height: 100%;
}
.middle {
border: solid 2px black;
height: 100%;
}
.inner {
height: 0%;
transition: height 5s 2s;
-moz-transition: height 5s 2s;
-webkit-transition: height 5s 2s;
-o-transition: height 5s 2s;
}
#outer.loaded .inner {
height: 100%;
}