HTML: ローラーを生成せずにボディを px 単位で上下に分割し、2 つの部分の高さの合計がボディの高さに等しくなります。 _html/css_WEB-ITnose

この影響には 2 つの理由があります:

1. モバイル側で Web 開発を行う場合、通常、以下のメニュー バーは固定位置を使用します:

メニュー バーを、表示されているウィンドウの下部にドッキングします。このアプローチは通常は問題ありませんが、次の 2 つの状況が同時に発生すると、レイアウトが破壊されます。

1) コンテンツが多すぎると、Y 軸ローラーが作成されます。 ) コンテンツエリア ソフトキーボードをトリガーできる input などのタグがあります。

2) などのラベルをクリックしてソフトキーボードを起動すると、元の固定は無効になり、画面をドラッグするとメニューバーも移動します。別の簡単な解決策を使用してバグを解決することもできます (詳細は他のブログ投稿で説明しています)

2. 1 のレイアウト方法を使用する場合、十分なコンテンツがある場合、もちろん、

を追加することで、ブロックされたコンテンツを「絞り出す」こともできます。

本文を 2 つの部分に分割する方法は次のとおりです。

まずソース コードを貼り付けてから説明します (理解できる場合)。ざっと見てください、以下は読まないでください) 説明):

以下は説明です (不完全な点があればご指摘ください):

1ボディの高さを表示画面の高さに設定します:

もちろん、次の方法でも上記の要件を満たすことができます:

ただし、質問で求められている効果を行う場合、質問で求められている効果が得られないため、これを行うことはお勧めできません。

padding-bottom:50px; を設定すると、メインタグの高さが 100% になります。その結果、本文の高さから 50px が減算されます。

ヒント: width:100%;

2. コンテンツを body の子要素の main タグに配置し、main タグを使用します。 overflow 属性を使用してコンテンツをオーバーフローする -webit-overflow-scrolling 属性を追加すると、指を離したときにすぐにスクロールが停止するという元の硬い効果の代わりに、コンテンツをよりスムーズにドラッグできます。 main タグにコンテンツを入れるのは、上記 1) の問題を解決するためで、1) が発生しても、表示されている画面の下部にあるメニュー バーには影響がありません。

3. 通常の設定の下部メニュー バーについては、分析する必要はありません。