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

MySQL slow query optimization: the advantages of limit from theory and practice

Many times, we expect the query result to be at m...

A practical record of encountering XSS attack in a VUE project

Table of contents Preface Discover the cause Cust...

Installation and use tutorial of Elasticsearch tool cerebro

Cerebro is an evolution of the Elasticsearch Kopf...

How to calculate the value of ken_len in MySQL query plan

The meaning of key_len In MySQL, you can use expl...

Solution to Navicat Premier remote connection to MySQL error 10038

Remote connection to MySQL fails, there may be th...

Two ways to enable firewall in Linux service

There are two ways: 1. Service method Check the f...

HTML table_Powernode Java Academy

To draw a table in HTML, use the table tag tr me...

A simple way to build a Docker environment

First, let’s understand what Docker is? Docker is...

MySQL permission control details analysis

Table of contents 1. Global level 2. Database lev...

CentOS 7.x deployment of master and slave DNS servers

1. Preparation Example: Two machines: 192.168.219...

In-depth explanation of the global status of WeChat applet

Preface In WeChat applet, you can use globalData ...