修度欸丟的CSS實用小技巧
RWD Iframe & 置底Footer
講者: 土豆
日期: 2020/05/17
大綱
- RWD Iframe
- 置底Footer
- 參考資料
RWD Iframe
問題
解決思路
把width設定成100%
然後想辦法讓height能以正確比例(16:9)跟著縮放
錯誤解法
iframe {
width: 100%;
height: 56.25%;
}height的%數指的是parent的height
正確解法
正確解法
<div class="container"> <!-- 加一個container -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/8VbXD4eoOTA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>/* 加上這段 */
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}HTML
CSS
解說
- padding的%數以width為基準
- 利用該特性透過padding撐開container的height
- positon設為relative讓iframe定位
container
Iframe
- position設為absolute，因為height為0，所以必須要跳出現有範圍，找到第一個relative會成為他的定位點
- top, left為0，確保位置正確
- height, width為100%，讓iframe的寬高與container一樣
置底Footer
問題
解決思路
Footer上方的區塊要設定最小高度
這個高度要剛好把footer擠到下方
解法1 - calc
footer設定固定高度
上方內容用wrapper包起，高度設為100vh - footer高度
解法1 - calc 缺點
缺乏彈性
footer一旦高度改變，就需要重新調整設定
解法2 - Flexbox
解法2 - Flexbox
- min-height為100vh，確保高度為整個螢幕
- 設為flex，direction為column，讓內部元素直向排列
- main設定flex-grow為1
- 利用flex-grow的特性，分配剩下來的高度給元素
body
main
flex-grow
height: 50px
height: 150px
500px
300px
flex-grow: 1
= 300px
flex-grow
height: 50px
height: 150px
500px
300px
flex-grow: 1
= 100px
flex-grow: 2
= 200px
flex-grow
參考資料
- How To Make a Responsive 100% Width YouTube iFrame Embed. 2020/05/17 from: https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed
- Lea Verou(2016)。CSS Secrets中文版：解決網頁設計問題的有效秘訣。臺北市：碁峰資訊。
感謝聆聽
修度欸丟的CSS實用小技巧
By Sam Yang
