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 マルチテーブル結合クエリの実行の詳細について簡単に説明します。

推薦する

CentOSはローカルyumソース/Alibaba Cloud yumソース/163yuanソースを設定し、yumソースの優先順位を設定します。

1. Centosイメージを使用してローカルのyumソースをビルドするCentOS をインストール...

Windows での MySQL 5.7.18 のインストールと設定のチュートリアル

この記事では、WindowsでのMySQL 5.7.18のインストールと設定のチュートリアルを参考ま...

CSS3ダイヤモンドパズルはdivのみを回転し、背景画像は回転しない機能を実現します

需要背景プロジェクトはVueを使用して作成され、ビジネス要件にはパズル効果があります。デフォルトの背...

ウェブページの画像を素早く表示する方法とテクニック

1. .jpg ではなく .gif を使用します。GIF は JPG に比べてサイズが小さくなります...

HTML チュートリアル: 順序なしリスト

<br />原文: http://andymao.com/andy/post/102.h...

フレックスレイアウトではサブアイテムの高さを維持できる

Flex レイアウトを使用すると、水平に配置すると、すべての子項目の高さが同じになることがわかります...

Vue3 + TypeScript 開発の概要

目次Vue3 + TypeScript 学習1. 環境設定1.1 最新のVue scaffoldin...

Vue デフォルトスロットの理解とサンプルコード

目次スロットとは何かデフォルトスロットの理解コードスニペット要約するスロットとは何かスロットは、親コ...

Docker での Redis のマスタースレーブ構成チュートリアルの詳細説明

1. Redisイメージを取得するdocker pull redis 2. それぞれポート6379、...

ネイティブ Js で実装されたシンプルなシームレス スクロール カルーセルのサンプル コード

シンプルなシームレススクロールカルーセルには多くの抜け穴があり、後から画像を追加するのは非常に不便で...

シンプルで簡単なJavaScript開発のためのSvelte実装原理の詳細な説明

目次デモ1フラグメントの作成スヴェルトコンポーネント状態を変更できるデモSvelte は長い間存在し...

LinuxでのDNSサーバーの設定の詳細な説明

1. DNSサーバーの概念インターネットでの通信には IP アドレスの助けが必要ですが、数字に対する...

CentOS 6-7 PHPのyumインストール方法(推奨)

1. 現在インストールされているPHPパッケージを確認するyum list installed |...

Vueはタブを切り替えてデータの状態を維持する3つの方法を実装します

Vue でタブ切り替えを実装する 3 つの方法1. v-showはコンテンツの切り替えを制御します1...

InnoDB ロック (レコード、ギャップ、Next-Key ロック) の詳細な説明

レコード ロックは、単一のインデックス レコードをロックします。レコード ロックは常にインデックスを...