ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLページの最小の高さをウィンドウに設定する方法 height_html/css_WEB-ITnose
HTMLページの最小の高さをウィンドウに設定する方法 height_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:30:233689ブラウズ
まず 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
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。