是在寫樣式的時候，會碰到給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自適應高度了，試試看吧，并且兼容多種瀏覽器。