CSS list sliding to prevent being covered by the bottom and adapt to the longer screen model processing

CSS list sliding to prevent being covered by the bottom and adapt to the longer screen model processing

1. When the mobile terminal processes the list sliding, WeChat has a built-in return page button at the bottom, which is often blocked. If the screen is longer, the bottom will be much shorter. The following method can solve this problem.

.container{
  position:relative;
  background:url(../img/chooseBg.jpg) no-repeat center center;
  background-size:cover;
  width:100%;
  height:100%;
  //.listConHeight{
  // height:9rem;
  // overflow:auto;
  //}
  .listConHeight {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 1.3rem;
    box-sizing: border-box;
    ul {
      width:6.78rem;
      height: 100%;
      margin:0 auto;
      overflow:auto;
      -webkit-overflow-scrolling: touch;
    }
  }

Summarize

The above is what I introduced to you about how to prevent the CSS list sliding from being covered by the bottom and adapt to models with longer screens. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<:  Baidu Input Method opens API, claims it can be ported and used at will

>>:  Solution to the problem that Centos8 cannot install docker

Recommend

Basic use of javascript array includes and reduce

Table of contents Preface Array.prototype.include...

Example code for CSS to achieve horizontal lines on both sides of the text

This article introduces the sample code of CSS to...

MYSQL's 10 classic optimization cases and scenarios

Table of contents 1. General steps for SQL optimi...

Summary of several submission methods of HTML forms

The most common, most commonly used and most gener...

How to use fdisk to partition disk in Linux

Commonly used commands for Linux partitions: fdis...

A brief discussion on JS regular RegExp object

Table of contents 1. RegExp object 2. Grammar 2.1...

CSS3 realizes text relief effect, engraving effect, flame text

To achieve this effect, you must first know a pro...

Docker /var/lib/docker/aufs/mnt directory cleaning method

The company's service uses docker, and the di...

Recommend several MySQL related tools

Preface: With the continuous development of Inter...

Pure CSS to achieve candle melting (water droplets) sample code

Achieve results Implementation ideas The melting ...

Graphic tutorial for installing MySQL 5.6.35 on Windows 10 64-bit

1. Download MySQL Community Server 5.6.35 Downloa...

Detailed tutorial for installing mysql5.7.21 under Windows

This article shares the installation tutorial of ...