修度欸丟的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

參考資料

感謝聆聽

Made with Slides.com