Flexレイアウトを使用してヘッドの固定コンテンツ領域のスクロールを実現する方法

ページ ヘッダーの固定レイアウトは、以前は position:fixed を使用して実装されていましたが、現在は flex レイアウトを使用して実装できるため、迅速かつ便利です。

Flex レイアウトの利点: 1. HTML ドキュメントのフローを破壊しない 2. 互換性が優れている。

display: flex と display: -webkit-box は単に異なるステージの名前であり、違いはありません。

<表示>
 <view class="header"></view>
 <view class="content"></view>
</ビュー>

ページ{
 display: -webkit-box; // 伸縮性のあるレイアウトを設定します -webkit-box-orient: vertical; // サブ要素の垂直レイアウトを設定します height: 100%;
}
。ヘッダ：{
  height: 50px; //ヘッドの高さを設定する（固定位置）
}  
。コンテンツ：{
  -webkit-box-flex: 1; //全画面を埋めるために1つの等しい部分を設定します overflow: auto //オーバーフロースクロールを設定します}

注: 応答がない場合は、外側のビューを削除します

Flex レイアウトを使用してヘッダーの固定コンテンツ領域のスクロールを実現する方法についての記事はこれで終わりです。Flex ヘッダーの固定コンテンツ領域のスクロールに関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。