牆壁彩繪 / Lin.mo 里莫彩繪事務所 , 藝術設計,

今天分享兩種讓網頁100%滿版的方式 , 
首先我先分享一下效果
https://www.linmohart.com.tw/ 
最上層的banner為滿版效果

//html框架
<header id="header">
  <nav><a href="javascript:;">menu</a>
</nav>
</header>
<main id="main">
   要滿版的部分
</div>


初學者一開始會有一種誤解
認為只要把最上層的 main 標籤設定跟你的螢幕解析度一樣的高度
就能達成100%滿版,那是錯誤的,因為幾乎可以說每一台電腦
顯示出來的都會不一樣,即便你們用的是同一台電腦,都有可能不同
(例如有人習慣隱藏書籤 有些人喜歡裝一堆外掛) 
所以你必須做到可以讓main標籤到哪個螢幕都是滿版

第一種方式, 比較古老的方式, 套用JQuery
只要複製以下代碼即可達到滿版
 

if($(window).width() > 1025  ) {
   //設定行動裝置解析度的判斷 到該環境時js就不會執行
    if($('.height').length > 0){
      var $video  = $('.height'),
          $window = $(window); 

        $(window).resize(function(){
            var height = $window.height();
            $video.css('height', height);

            var videoWidth = $video.width(),
                windowWidth = $window.width(),
            marginLeftAdjust =   (windowWidth - videoWidth) / 2;

            $video.css({
                'height': height, 
                'marginLeft' : marginLeftAdjust
            });
        }).resize();
    }    
  }



在以前css還沒那麼厲害的時候 用js做滿版網頁比較常見
但現在css非常強大 , 也是我要講的第二種方式
利用純css 不運用到一點點的js 請看css碼



#main {
    width: 100%;
    height: 100vh;
}

不要懷疑 這樣就可以滿版了 跟上面程式碼的比起來
是不是輕鬆許多？ 當然 , 滿版之後還有圖片或影片的問題
因為main內部的html元素是不會跟著滿版的
下一回, 我再來分享這部分！