是在写样式的时候，会碰到给div无论怎么加样式 overflow-y: auto 的时候，都不会出现垂直的滚动条，经过不断折腾终于知道是啥原因导致了。

<style>

body{

height: 100%; //若是所有的div的高度都不固定，需要body高度也是100%，才可以出现滚动条

}

.parent{

//你自己样式

height: 100%; //父元素的高度也需要是100%才可以出现滚动条

}

.children{

overflow-y: auto;

overflow-x: hidden;

height: 100%;

}

</style>

<div class="parent">

<div class="children">

xx-blog主题

xxzhuti主题网

</div>

SS实现一个高度过度的动画 ，针对于属性height，设置一个transition动画就能实现我们想要看到的效果。而这个高度在实际情况下， 我们并不希望它是一个固定的值，需要做的更灵活一点，比如随着内容的增减自适应，所以，有人就会想到使用transition将高度从0过度到auto，然而，这样实现动画效果会生效吗？有没有更优秀的技巧或者方法了？

有的，今天和大家聊一聊这个问题。

文章中讲解的DOM结构，如下

效果如下，鼠标移上去的时候，下面这段文字展示（<mark>动画效果</mark> ）

01. height过度0到auto？

默认的时候高度设置成0，鼠标移上去的时候，将高度设置成auto，像下面代码这样

从效果上来看，这个变化是瞬间的，并没有500毫秒过度效果。也就是说CSS不能使用transition实现height从0过度到auto。

这不符合我们的预期效果。

02. height过度0到固定值？

竟然auto不能动画过度，那我们就改成固定的值（最简单的就是改成数字），比如，从0过度到300。这样过度效果就生效了。

虽然这样能过度过去，但这不是一个很优的方法， 因为这样处理的话，我们得通过JS去计算这个高度，才能确保我们的功能不出BUG。

03. max-height过度0到固定值？

为什么不试一下最大高度了？

max-height从0到固定值也是可以animation过去的，唯一不太好的地方就是，我们的内容有可能会溢出，毕竟我们设置的只是一个最大的高度。

如果需求能保证内容的高度永远不会达到一定的值，用这个方法完全没什么问题。我们只需要设置一个适当的最大高度值就好。

04. 过度grid-template-rows？

这个时候，网格布局给我们提供了另外一个巧妙的解决方案。

只需要将grid-template-rows从0fr过度到1fr。如此一来，我们的网格项将从0过渡到其'自然'高度。这应该就是比较完美的解决办法。

代码如下

功能是实现了，我也不得不关注一下这属性的兼容性问题。

注意到chrome从107版本开始支持这个属性。

　建企业网站时为什么需要使用iframe自适应高度呢？其实就是为了美观，要不然iframe和窗口长短大小不一，看起来总是不那么舒服，自适应高度对于用户体验度的提升尤为重要。网上关于iframe高度自适应的代码有很多，但比较杂乱，有一些过于复杂，有一些存在明显错误。缘由心生给出了一段修改后的精简版本，感觉不错，并简单修正了其中一处Opera下的错误。

iframe框架自适应高度
首先设置样式:body{margin:0; padding:0;}
如果不设置body的margin和padding为0的话，页面上下左右会出现空白。

html代码如下：
<iframe src="https://www.371jianzhan.com" id="myiframe" scrolling="no" onload="changeMyFrameHeight()"></iframe>

js代码也得跟着改：
function changeMyFrameHeight(){
    var ifm= document.getElementById("iframepage"); 
    ifm.height=document.documentElement.clientHeight;
}

window.onresize=function(){  
     changeMyFrameHeight();  

}

window.onresize的作用就是当窗口大小改变的时候会触发这个事件。

所以，建公司网站使用此方法可以完美的、真正的让iframe自适应高度了，试试看吧，并且兼容多种浏览器。