是在寫樣式的時候,會碰到給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> )
默認的時候高度設置成0,鼠標移上去的時候,將高度設置成auto,像下面代碼這樣
從效果上來看,這個變化是瞬間的,并沒有500毫秒過度效果。也就是說CSS不能使用transition實現height從0過度到auto。
這不符合我們的預期效果。
竟然auto不能動畫過度,那我們就改成固定的值(最簡單的就是改成數字),比如,從0過度到300。這樣過度效果就生效了。
雖然這樣能過度過去,但這不是一個很優的方法, 因為這樣處理的話,我們得通過JS去計算這個高度,才能確保我們的功能不出BUG。
為什么不試一下最大高度了?
max-height從0到固定值也是可以animation過去的,唯一不太好的地方就是,我們的內容有可能會溢出,畢竟我們設置的只是一個最大的高度。
如果需求能保證內容的高度永遠不會達到一定的值,用這個方法完全沒什么問題。我們只需要設置一個適當的最大高度值就好。
這個時候,網格布局給我們提供了另外一個巧妙的解決方案。
只需要將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自適應高度了,試試看吧,并且兼容多種瀏覽器。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。