Asp.NetフッターFooter常に最下位スキーム
13097 ワード
最近、フッターを底に貼るように要求され、最初は絶対位置のfooterスキーム(footerのtopを設定)を採用し、大部分の状況に対応できるが、ページが規範化されていないため、計算された高さ値が小さすぎて、底が浮かび上がることがある.ページの内容に重なることもあります.私たちはもともとonmouseup,onresize,onloadで計算を行っていましたが、システムの膨大さのため、いくつかの層のonmouseupイベントが伝わらないことが多く(stoppropagationやcancelBubbleを呼び出した関係かもしれません)、未知の状況が多く発生しています.振り返って、この要件の具体的な要件を説明します.a.表示されるコンテンツの合計高さ(フッターを含まない)がブラウザの顧客領域の実際の高さを超えない場合、フッターはブラウザの下部に貼らなければなりませんが、スクロールバーは使用できません.
b.表示されるコンテンツの総高さがブラウザの顧客領域の実際の高さを超えた場合、フッターはコンテンツの下に下がる
実は個人的に最初に思いついたのはfooterの高さを除いた内容の総高さを計算する方法で、問題は総高さはどのように計算しますか?いつ計算しますか.これは確かに考えるべき問題だ.
総高さの計算は簡単な問題のように見えますが、実際にはそうですか?DOMを巡る方法で高さを計算すると、すべての要素が高さ計算に組み込まれるわけではないので、正確な高さを出すのは難しいかもしれません(例えば、floatを加えた要素、positionがabsoluteの要素など).そこでブラウザに手伝ってもらい、できるだけhtml DOM原生属性で解决しようと思ったら、documentかwindowの属性が思い浮かびました.IEでdocumentを見つけましたdocumentElement.ClientHeight(私たちが使用しているDOCTYPEはXHTML 1.0なのでdocument.body.clientHeightは正常に動作しません).firefoxではwindowを見つけましたinnerHeight.これまでページ全体の高さを得ることができましたが、footerの高さを除いたコンテンツの総高さは自然に次の式で得ることができます.
footerの高さを除去するコンテンツの総高さ=ページの総高さ-footerの高さ
次に、この高さをContentのコンテナ(IDがcontentContainerのDIVであると仮定)に割り当てることにします.ここのContentにはfooter以外のもの(headerを含む)が含まれていることに注意してください.bが必要なので、footerがcontentが表示高さを超えても表示されないようにする方法を考えなければなりません(ページの下部に浮かぶ)ので、topやmargin-topは絶対に使えません.cssマニュアルを調べてみると、実際の内容が足りない場合でも、設定の高さを維持し、設定の高さを超えて自然に高さを増やす属性がありますが、IE 6はmin-heightをサポートしていません.実験により,IE 6ではheightで代用できることが示された.
.codearea{ color:black; background-color:white; line-height:18px; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; overflow:auto; text-align:left; font-size:12px; font-family: "Courier New","Consolas","Fixedsys","BitStream Vera Sans Mono", courier,monospace,serif}
.codearea pre{ color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}
.linewrap pre{white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; word-break:normal}
.codearea pre.alt{ background-color:#f7f7ff !important}
.codearea .lnum{color:#4f81bd;line-height:18px}
最後に高さ計算を再開するタイミングを選択します.min-height(IE 6を除く)を設定しているので、コンテンツの高さ変更時に高さを再計算する必要がないことを根本的に保証していますが、ブラウザの顧客領域の大きさの変更を考慮しなければならない場合があります.そのため、最後にonresizeイベントとonloadイベントを選択しました.完全なコードは次のとおりです.
.codearea{ color:black; background-color:white; line-height:18px; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; overflow:auto; text-align:left; font-size:12px; font-family: "Courier New","Consolas","Fixedsys","BitStream Vera Sans Mono", courier,monospace,serif}
.codearea pre{ color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}
.linewrap pre{white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; word-break:normal}
.codearea pre.alt{ background-color:#f7f7ff !important}
.codearea .lnum{color:#4f81bd;line-height:18px}
また、この方法には小さな脆弱性があり、一部のレイヤがfloatを使用している場合、ブラウザが返す高さ値が不正確になる可能性があるため、clear大法を使用してこの問題を解決し、ブラウザにこれらのfloatの高さを計算する必要があることを伝えなければならない.心得:a.ブラウザの多くの付属属性は、上位コードよりも正確に計算されることがあります.結局、ブラウザがレンダリングエンジンを呼び出す責任があるので、誰よりも自分が提示したものを知っています.b.ページ構造を適切に調整(コンテナを追加)することで、問題を解決しやすくなります.(そもそも私たちのページにはContentContainerのようなヘッダとcontentを同時に含むコンテナはありません)
b.表示されるコンテンツの総高さがブラウザの顧客領域の実際の高さを超えた場合、フッターはコンテンツの下に下がる
実は個人的に最初に思いついたのはfooterの高さを除いた内容の総高さを計算する方法で、問題は総高さはどのように計算しますか?いつ計算しますか.これは確かに考えるべき問題だ.
総高さの計算は簡単な問題のように見えますが、実際にはそうですか?DOMを巡る方法で高さを計算すると、すべての要素が高さ計算に組み込まれるわけではないので、正確な高さを出すのは難しいかもしれません(例えば、floatを加えた要素、positionがabsoluteの要素など).そこでブラウザに手伝ってもらい、できるだけhtml DOM原生属性で解决しようと思ったら、documentかwindowの属性が思い浮かびました.IEでdocumentを見つけましたdocumentElement.ClientHeight(私たちが使用しているDOCTYPEはXHTML 1.0なのでdocument.body.clientHeightは正常に動作しません).firefoxではwindowを見つけましたinnerHeight.これまでページ全体の高さを得ることができましたが、footerの高さを除いたコンテンツの総高さは自然に次の式で得ることができます.
footerの高さを除去するコンテンツの総高さ=ページの総高さ-footerの高さ
次に、この高さをContentのコンテナ(IDがcontentContainerのDIVであると仮定)に割り当てることにします.ここのContentにはfooter以外のもの(headerを含む)が含まれていることに注意してください.bが必要なので、footerがcontentが表示高さを超えても表示されないようにする方法を考えなければなりません(ページの下部に浮かぶ)ので、topやmargin-topは絶対に使えません.cssマニュアルを調べてみると、実際の内容が足りない場合でも、設定の高さを維持し、設定の高さを超えて自然に高さを増やす属性がありますが、IE 6はmin-heightをサポートしていません.実験により,IE 6ではheightで代用できることが示された.
var isIE6=navigator.userAgent.indexOf('MSIE 6')>0;var isIE=navigator.userAgent.indexOf('MSIE')>0; function setFooterPosition() var objBodycontainer = document.getElementById("ContentContainer"); var footerHeight=document.getElementById('FooterContainer').offsetHeight; if(!isIE){ if(window.innerHeight > footerHeight) document.getElementById('ContentContainer').style.minHeight = (window.innerHeight-footerHeight)+'px';}else{ if(isIE6) { if(document.documentElement.clientHeight > footerHeight) document.getElementById('ContentContainer').style.height = (document.documentElement.clientHeight-footerHeight)+'px'; } else { if(document.documentElement.clientHeight > footerHeight) document.getElementById('ContentContainer').style.minHeight = (document.documentElement.clientHeight-footerHeight)+'px'; } }.codearea{ color:black; background-color:white; line-height:18px; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; overflow:auto; text-align:left; font-size:12px; font-family: "Courier New","Consolas","Fixedsys","BitStream Vera Sans Mono", courier,monospace,serif}
.codearea pre{ color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}
.linewrap pre{white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; word-break:normal}
.codearea pre.alt{ background-color:#f7f7ff !important}
.codearea .lnum{color:#4f81bd;line-height:18px}
最後に高さ計算を再開するタイミングを選択します.min-height(IE 6を除く)を設定しているので、コンテンツの高さ変更時に高さを再計算する必要がないことを根本的に保証していますが、ブラウザの顧客領域の大きさの変更を考慮しなければならない場合があります.そのため、最後にonresizeイベントとonloadイベントを選択しました.完全なコードは次のとおりです.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head></head><script language="JavaScript"> var isIE6 = navigator.userAgent.indexOf('MSIE 6') > 0; var isIE = navigator.userAgent.indexOf('MSIE') > 0; function setFooterPosition() { var objBodycontainer = document.getElementById("ContentContainer"); var footerHeight = document.getElementById('FooterContainer').offsetHeight; if (!isIE) { if (window.innerHeight > footerHeight) document.getElementById('ContentContainer').style.minHeight = (window.innerHeight - footerHeight) + 'px'; } else { if (isIE6) { if (document.documentElement.clientHeight > footerHeight) document.getElementById('ContentContainer').style.height = (document.documentElement.clientHeight - footerHeight) + 'px'; } else { if (document.documentElement.clientHeight > footerHeight) document.getElementById('ContentContainer').style.minHeight = (document.documentElement.clientHeight - footerHeight) + 'px'; } } } if (isIE) { window.attachEvent("onload", setFooterPosition); window.attachEvent("onresize", setFooterPosition); } else { window.addEventListener("load", setFooterPosition, false); window.addEventListener("resize", setFooterPosition, false); }</script><style type="text/css"> body { margin: 0; } #content { height: 300px; background-color: green; } #FooterContainer { height: 30px; background-color: red; }</style><body> <div id="ContentContainer"> <div id="content"> aa </div> </div> <div id="FooterContainer"> </div></body></html>.codearea{ color:black; background-color:white; line-height:18px; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; overflow:auto; text-align:left; font-size:12px; font-family: "Courier New","Consolas","Fixedsys","BitStream Vera Sans Mono", courier,monospace,serif}
.codearea pre{ color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}
.linewrap pre{white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; word-break:normal}
.codearea pre.alt{ background-color:#f7f7ff !important}
.codearea .lnum{color:#4f81bd;line-height:18px}
また、この方法には小さな脆弱性があり、一部のレイヤがfloatを使用している場合、ブラウザが返す高さ値が不正確になる可能性があるため、clear大法を使用してこの問題を解決し、ブラウザにこれらのfloatの高さを計算する必要があることを伝えなければならない.心得:a.ブラウザの多くの付属属性は、上位コードよりも正確に計算されることがあります.結局、ブラウザがレンダリングエンジンを呼び出す責任があるので、誰よりも自分が提示したものを知っています.b.ページ構造を適切に調整(コンテナを追加)することで、問題を解決しやすくなります.(そもそも私たちのページにはContentContainerのようなヘッダとcontentを同時に含むコンテナはありません)