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 sets boolean type operations

Mysql sets boolean type 1. Tinyint type We create...

Detailed explanation of how to dynamically set the browser title in Vue

Table of contents nonsense text The first router/...

Explanation and example usage of 4 custom instructions in Vue

Four practical vue custom instructions 1. v-drag ...

Linux uses dual network card bond and screwdriver interface

What is bond NIC bond is a technology that is com...

CSS to achieve particle dynamic button effect

Original link https://github.com/XboxYan/no… A bu...

How to reduce the memory and CPU usage of web pages

<br />Some web pages may not look large but ...

Summary of four situations of joint query between two tables in Mysql

Generally speaking, in order to get more complete...

Using better-scroll component in Vue to realize horizontal scrolling function

About Recently, in the process of learning Vue, I...

Use CSS to set the width of INPUT in TD

Recently, when I was using C# to make a Web progra...

Use a diagram to explain what Web2.0 is

Nowadays we often talk about Web2.0, so what is W...

Solution to the 404/503 problem when logging in to TeamCenter12

TeamCenter12 enters the account password and clic...

Detailed explanation of several ways to create objects and object methods in js

This article is the second article about objects ...

The difference between Vue interpolation expression and v-text directive

Table of contents 1. Use plugin expressions 2. Us...

Detailed explanation of flex layout in CSS

Flex layout is also called elastic layout. Any co...