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

はじめに

今日のフロントエンド ページ、特にモバイル端末では、多くの場合、

または

モジュールを一時停止して、ページの位置を維持する必要があります。ページの上部、または下の図に示すように下部です。

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

1 ...2 <section class='footer'>3     <div class='reply-topic'>回复主题</div>4 </section>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定于最下方,假定<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 //假定<footer>的高度为60px2 body 3 {4     padding-bottom: 60px; 5 }

方法 3. 同じレベルのプレースホルダー

を追加します

個人的には、この方法が最も実用的だと思います。

ブロックの外側に div のレイヤーをラップしてから追加します。

を持つ div は、同じレベルの

ブロックの高さに設定され、コンテンツを含めることはできません。ページ上のプレースホルダーの効果として、下部は

と同じ高さのスペースを占めます。もちろん、ページが下部にスライドすると、元の

ブロックがこのプレースホルダー ブロックと完全に重なります。他のページには影響しません。コードは次のとおりです: 唯一の欠点は、セマンティクスに準拠しておらず、実質的なコンテンツのない空のタグを追加することです。

 1 <!-- footer外包裹一层div--> 2 <div> 3     <!--充当占位符的div块，无实质内容 --> 4     <div style="height:60px;"></div>  5  6     <!--fixed悬浮出来的footer --> 7     <section class='footer'> 8         <div class='reply-topic'>回复主题</div> 9     </section>10 </div>    

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション

3週間前 By DDD

Windows11 KB5054979の新しいものと更新の問題を修正する方法

2週間前 By DDD

Atomfallのクレーンコントロールキーカードを見つける場所

3週間前 By DDD

<🎜>：Dead Rails-すべての課題を完了する方法

4週間前 By DDD

Atomfall Guide：アイテムの場所、クエストガイド、およびヒント

1 か月前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7685

15

Java チュートリアル

1639

14

CakePHP チュートリアル

1393

52

Laravel チュートリアル

1287

25

PHP チュートリアル

1229

29

もっと見る