[テクニック] content_html/css_WEB-ITnose をブロックするフローティング <header> と <footer> の問題を解決するためのヒント-htmlチュートリアル-php.cn

はじめに

今日のフロントエンド ページ、特にモバイル端末では、多くの場合、 または モジュールを一時停止して、ページの位置を維持する必要があります。ページの上部、または下の図に示すように下部です。

「返信トピック」モジュールはページのフローティングに従い、ページの下部に一時停止されています コード構造は次のとおりです。

1 ...2 3 回复主题 4 5 ... ログイン後にコピー

このような機能を実現するには、当然、position:fixed を使用する必要があります。ただし、position: fix の使用にはバグがあります。例として、下部のフローティング を取り上げます (ページが下部にスライドすると、ページが外れてしまいます)。位置が固定されているため、通常のドキュメント フローが発生し、一部のコンテンツが見えにくくなります。以下に示すように:

上の左側が問題のある表示、右側が正常な表示です。では、この問題をどうやって解決すればよいでしょうか?ここで、より良い方法を模索したいと考えて、私の意見を3つ述べさせていただきます。

方法１. Javasrriptで解く

スライドしたらjsを使って解く。バーがページ コンテンツの下部にスライドし、本来ドキュメント フローから切り離される固定位置を、ドキュメント フローから切り離されないように変更します。ドキュメント ストリームの相対的な位置決めだけで十分です。

スクリプトを使用して問題を解決するのは最も困難な方法です。CSS を使用して問題を解決できる場合は、スクリプトを使用しないようにしてください。ただし、それでも方法です。

1 //滚动条在Y轴上的滚动距离 2 function getScrollTop(){ 3 return document.body.scrollTop; 4 } 5 //文档的总高度 6 function getScrollHeight(){ 7 8 return document.body.clientHeight; 9 }10 //浏览器视口的高度11 function getWindowHeight(){12 var windowHeight = 0;13 if(document.compatMode == "CSS1Compat")14 {15 windowHeight = document.documentElement.clientHeight;16 }17 else18 {19 windowHeight = document.body.clientHeight;20 }21 return windowHeight;22 }23 24 //滑动监听25 window.onscroll = function(){26 //滑到底部时footer定于最下方,假定 的height为6027 if((getScrollHeight() - getScrollTop() - getWindowHeight()) > 61) 28 $('.footer').css('position','fixed'); 29 else30 $('.footer').css('position','relative');31 } ログイン後にコピー

方法2. 本文にpadding-bottomを追加する

通常のドキュメントフローのコンテンツがpadding-bottom属性を生成するように、html にpadding-bottom属性を追加します。ボディの底部で設定された距離。 欠点は、モジュールの再利用と、プロジェクト起動後にCSSファイルを頻繁にマージする必要があることを考慮すると、他のページがこのフローティングブロックを必要としない場合、 固定位置を必要としないページに負担がかかることです。この方法はお勧めできません。

1 //假定 的高度为60px2 body 3 {4 padding-bottom: 60px; 5 } ログイン後にコピー

方法 3. 同じレベルのプレースホルダー を追加します

個人的には、この方法が最も実用的だと思います。 ブロックの外側に div のレイヤーをラップしてから追加します。 を持つ div は、同じレベルの ブロックの高さに設定され、コンテンツを含めることはできません。ページ上のプレースホルダーの効果として、下部は と同じ高さのスペースを占めます。もちろん、ページが下部にスライドすると、元の ブロックがこのプレースホルダー ブロックと完全に重なります。他のページには影響しません。コードは次のとおりです: 唯一の欠点は、セマンティクスに準拠しておらず、実質的なコンテンツのない空のタグを追加することです。

1 2 3 4 5 6 7 8 回复主题 9 10 ログイン後にコピー

以上、私が考えた３つの方法ですが、もし記事に間違いやもっと良い方法があれば教えていただければ幸いです。

[テクニック] content_html/css_WEB-ITnose をブロックするフローティング と の問題を解決するためのヒント

[テクニック] content_html/css_WEB-ITnose をブロックするフローティング
と
の問題を解決するためのヒント