HTMLページの最小の高さをウィンドウに設定する方法 height_html/css

HTMLページの最小の高さをウィンドウに設定する方法 height_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

リリース： 2016-06-24 11:30:23

オリジナル

3814 人が閲覧しました

まず HTML とレンダリングを見てください

<!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>

ログイン後にコピー

レンダリング:

ここには 2 つの方法があります:

1 つ目は CSS を使用する方法です:

1 メイン要素にスタイルを追加します。ええ

余白の高さは、ページの先頭と末尾の高さです。

2. メイン要素のすべてのコンテンツを表示するには、対応するパディングを増やす必要があります:

    min-height:100vh;    margin-top:-60px;//数值等于页面头部高度    margin-bottom:-60px;//数值等于页面尾部高度

ログイン後にコピー

またはその子要素のパディングを設定します:

    box-sizing:border-box;//将main元素的宽高计算方式更改为包含内边距和边框    padding-top:60px;//数值等于页面头部高度    padding-botom:60px;//数值等于页面尾部高度

ログイン後にコピー

3.単位はサポートされていないため、IE8 と互換性を持たせる必要がある場合は、HTML と本文の両方の高さを 100% に設定し、次にメイン要素の最小高さを 100% に設定します (min-height: 100%)。他の設定は変更しないでください。

   .auto-height>div{    padding-top:60px;//数值等于页面头部高度    padding-botom:60px;//数值等于页面尾部高度   }

ログイン後にコピー

2 番目の方法は JavaScript を使用することです:

JavaScript を使用してメイン要素の最小の高さを動的に設定します。これは実装方法の 1 つです

   html,body{    height:100%;   }

ログイン後にコピー

最小の高さの値 = ウィンドウの高さ -ページヘッダーの高さ - ページフッターの高さ。

出典: http://my.oschina.net/hwxn/blog/598645