CSSリストのスライドにより、下部に隠れるのを防ぎ、長い画面モデルの処理に適応します。

CSSリストのスライドにより、下部に隠れるのを防ぎ、長い画面モデルの処理に適応します。

1. モバイル端末がリストスライドを処理するとき、WeChat には下部にページに戻るボタンが組み込まれていますが、これがブロックされることがよくあります。画面が長い場合、下部ははるかに短くなります。次の方法でこの問題を解決できます。

。容器{
  位置:相対;
  background:url(../img/chooseBg.jpg) 繰り返しなし 中央 中央;
  背景サイズ:カバー;
  幅:100%;
  高さ:100%;
  //.listConHeight{
  // 高さ:9rem;
  // オーバーフロー:自動;
  //
  .listConHeight {
    位置: 絶対;
    上: 0;
    左: 0;
    幅: 100%;
    高さ: 100%;
    パディングトップ: 1.3rem;
    ボックスのサイズ: 境界線ボックス;
    ul {
      幅:6.78rem;
      高さ: 100%;
      マージン:0 自動;
      オーバーフロー:自動;
      -webkit-オーバーフロースクロール: タッチ;
    }
  }

要約する

上記は、CSS リストのスライドが下部に隠れないようにし、画面が長いモデルに適応する方法について紹介したものです。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  Centos8でdockerがインストールできない問題の解決方法

>>:  Mysql マルチテーブル結合クエリの実行の詳細について簡単に説明します。

推薦する

Ubuntu MySQL バージョンが 5.7 にアップグレードされました

数日前、図書館はサーバー(Ubuntu 14.04)にセキュリティ上の脆弱性があり、時間通りに修復さ...

JavaScript 関数のパフォーマンスを測定するさまざまな方法の比較

目次概要パフォーマンス.nowコンソール.time時間精度を短縮注意事項分割して征服する入力値に注意...

Vue モバイル開発で better-scroll を使用するときにクリック イベントが失敗する問題の解決策

最近、モバイル プロジェクトの開発方法を学ぶために vue を使用し、スクロールには better-...

MySQL ソートの原則とケース分析

序文ソートはデータベースの基本的な機能であり、MySQL も例外ではありません。ユーザーは、Orde...

MySQL データベースの基礎 SQL ウィンドウ関数の例の分析チュートリアル

目次導入導入集計関数 + over()ソート関数 + over() ntile() 関数 + ove...

WeChatミニプログラムがシームレスなスクロールを実現

この記事の例では、WeChatアプレットのシームレスなスクロールを実現するための具体的なコードを参考...

CSS3はリストの無限スクロール/カルーセル効果を実現します

効果プレビューアイデア現在のリストを最後の項目までスクロールし、すぐに最初の項目に戻ります。問題1....

Gojs がアリのラインアニメーション効果を実装

目次1. Gojsの実装1. 描画2. 破線の実装3. 点線を動かす2. 点線と点線アニメーションの...

ウェブページ上の写真プレビューナビゲーションを設計するためのヒント

<br />ナビゲーションとは、ウェブサイトの上部にあることが多いナビゲーション バーの...

vue+element カスタムクエリコンポーネント

この記事では主に Vue プロジェクトを紹介します。要素の導入を前提として、コンポーネントを 2 回...

Vue はデータの変更をどのように追跡しますか?

目次背景例誤解 - コールスタックを表示するためにウォッチでブレークポイントを設定する正しいアプロー...

この記事は、Dockerにおけるcgroupの具体的な使用法を徹底的に理解するのに役立ちます。

目次cgroupとはcgroupの構成cgroupが提供する機能cgroup 内の CPU を制限す...

Better-scrollはメニューとコンテンツをリンクする効果を実現します

1. 基本的な使い方 <!DOCTYPE html> <html lang=&qu...

Mysql の主キー インデックスと非主キー インデックスの違いについて簡単に説明します。

目次インデックスとは何か主キーインデックスと通常のインデックスの違いインデックスにはどのデータ構造が...

Vue.jsで実装されたカレンダープラグインの使い方を詳しく説明します

本日実装する機能は、以下の機能です。vue.js シミュレーションカレンダープラグインさて、もう無駄...