使用嵌套的div动画显示div的高度

可以通过CSS和JavaScript实现。下面是一种常见的实现方法：

HTML结构：

<div class="outer">
  <div class="inner"></div>
</div>

CSS样式：

.outer {
  width: 300px;
  height: 0;
  overflow: hidden;
  transition: height 0.5s ease; /* 动画过渡效果 */
}

.inner {
  width: 100%;
  height: 200px;
  background-color: #f0f0f0;
}

JavaScript代码：

window.onload = function() {
  var outer = document.querySelector('.outer');
  var inner = document.querySelector('.inner');

  outer.style.height = inner.offsetHeight + 'px';
};

解析：

1. HTML中，我们创建了一个外层div（class为outer）和一个内层div（class为inner）。
2. CSS中，外层div的初始高度设置为0，并设置了overflow:hidden，使得内层div超出外层div的部分被隐藏。同时，添加了一个过渡效果，使得高度的变化有动画效果。内层div设置了一个固定的高度作为动画的目标高度。
3. JavaScript中，使用window.onload事件确保页面完全加载后再执行代码。通过querySelector选择器获取到外层div和内层div的DOM对象。然后将外层div的高度设置为内层div的实际高度，这样就能够通过动画逐渐显示出内层div的高度。

这种方法适用于在页面加载后或者在特定交互触发时显示div的高度，可以用于实现一些展开式的效果，比如折叠面板、下拉菜单等。相关的腾讯云产品推荐可以参考腾讯云的Web应用防火墙（WAF）产品，详情请访问：腾讯云Web应用防火墙。