設置頁面最小高度爲窗口高度的方法

時間 2019-11-11

標籤設置頁面最小高度窗口方法简体版

原文原文鏈接

先看html和效果圖css

<!DOCTYPE html>

<html>

 <head>

  <style>

   body,p{

    margin:0;

   }

   .header,.footer{

    background:#000;

    height:60px;

   }

   

   /*兼容ie8

   html,body{

    height:100%;

   }

   */

   .auto-height{

    /*兼容ie8 

    min-height:100%;

    */

    min-height:100vh;

    margin-top:-60px;

    margin-bottom:-60px;

    /*設置內邊距方式一*/

    box-sizing:border-box;

    padding-top:60px;

    padding-bottom:60px;

   }

   /*設置內邊距方式二

   .auto-height>div{

    padding-top:60px;

    padding-botom:60px;

   }

   */

  </style>

 </head>

 <body>

  <div class="header">

  </div>

  <div class="main auto-height" id="main-con">

   <div>

    <p>設置頁面最小高度爲窗口高度的方法</p>

   </div>

  </div>

  <div class="footer">

  </div>

  <!-- script>

   var mainElem=document.getElementById("main-con");

   document.onreadystatechange=function(){

    if(document.readyState=="complete"){


     mainElem.style.minHeight=(document.documentElement.clientHeight-120)+"px";



     window.onresize=function(){

      mainElem.style.minHeight=(document.documentElement.clientHeight-120)+"px";

     };

    }

   };   

  </script -->

 </body>

</html>

效果圖：html

這裏有兩種方法：code

第一種是使用css實現：htm

1. 給main元素添加樣式：ip

    min-height:100vh;

    margin-top:-60px;//數值等於頁面頭部高度

    margin-bottom:-60px;//數值等於頁面尾部高度

margin的高度是頁面頭部和尾部的高度。get

2. 爲了讓main元素裏的全部內容都顯示出來，要增長相應的內邊距，這裏有兩種方法：io

    box-sizing:border-box;//將main元素的寬高計算方式更改成包含內邊距和邊框

    padding-top:60px;//數值等於頁面頭部高度

    padding-botom:60px;//數值等於頁面尾部高度

或設置其子元素的內邊距：function

   .auto-height>div{

    padding-top:60px;//數值等於頁面頭部高度

    padding-botom:60px;//數值等於頁面尾部高度

   }

3.因爲ie8不支持vh單位，因此若是須要兼容ie8的話，能夠將html和body的高度都設爲100%，再設置main元素的最小高度爲100%（min-height:100%），其餘的設置不變。class

   html,body{

    height:100%;

   }

第二種是使用JavaScript來實現：cli

使用JavaScript來動態設置main元素的最小高度便可，這裏提供其中一種實現方式

   var mainElem=document.getElementById("main-con");//得到main元素

   document.onreadystatechange=function(){

    if(document.readyState=="complete"){//頁面加載完成時執行

     mainElem.style.minHeight=(document.documentElement.clientHeight-120)+"px";//初始化最小高度

     window.onresize=function(){//窗口大小改變時改變main元素的最小高度

      mainElem.style.minHeight=(document.documentElement.clientHeight-120)+"px";

     };

    }

   };

最小高度的值=窗口的高度-頁面頭部高度-頁面尾部高度。