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

Detailed steps to install MySQL 5.6 X64 version under Linux

environment: 1. CentOS6.5 X64 2.mysql-5.6.34-linu...

Talk about important subdirectory issues in Linux system

/etc/fstab Automatically mount partitions/disks, ...

VUE+SpringBoot implements paging function

This article mainly introduces how to implement a...

Detailed analysis of MySQL instance crash cases

[Problem description] Our production environment ...

Detailed Introduction to MySQL Innodb Index Mechanism

1. What is an index? An index is a data structure...

Docker Getting Started Installation Tutorial (Beginner Edition)

Doccer Introduction: Docker is a container-relate...

18 sets of exquisite Apple-style free icon materials to share

Apple Mug Icons and Extras HD StorageBox – add on...

Rainbow button style made with CSS3

Result: Implementation code: html <div class=&...

Summary of Linux command methods to view used commands

There are many commands used in the system, so ho...

Javascript to achieve drumming effect

This article shares the specific code of Javascri...

Detailed explanation of Vue component reuse and expansion

Table of contents Overview Is the extension neces...