Detailed explanation of overflow:auto usage

Before starting the main text, I will introduce some uses of overflow and flex layout.
overflow: auto; If the content is trimmed, the browser displays a scroll bar so that the remaining content can be viewed.
Properties in flex
display: flex;
flex-direction: column; The main axis is vertical and the starting point is at the top edge.
Using overflow and flex layout together

The code is as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Usage of overflow:auto</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/reset.css" />

    <style type="text/css">
        html,body{
            width: 100%;
            height: 100%;
        }
        .container{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .header{
            width: 100%;
            height: 100px;
            background: #f99;
        }
        .content{
            width: 100%;
            height: 100%;
            overflow:auto;
            background: yellow;
            flex: 1;
        }
        .footer{
            width: 100%;
            height: 100px;
            background: #99f;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">

        </div>
        <div class="content">
            <ul>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                You need to write more li here so that the effect will be displayed. I do this here to save space.
            </ul>
        </div>

        <div class="footer">
        </div>
    </div>
</body>
</html>

To achieve the overflow: auto; effect, first layout and then write the style.
In the style, add the following style to the outermost parent box container:

.container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

Also, be sure to give html and body a width and height of 100%;

html,body{
    width: 100%;
    height: 100%;
}

The header and bottom have fixed heights. The header and bottom of general apps are fixed, like WeChat chat records.

.header{
    width: 100%;
    height: 100px;
    background: #f99;
}

.footer{
    width: 100%;
    height: 100px;
    background: #99f;
}

The content in the middle is given flex: 1, and our main character overflow: auto is added; the content beyond that is automatically cropped.

.content{
    width: 100%;
    height: 100%;
    overflow:auto;
    background: yellow;
    flex: 1;
    }

The effect diagram is as follows:

這里寫圖片描述

The content area in the middle can be slid up and down, and the excess part is automatically cropped.
No matter how things change, the essence remains the same. If you have difficulty implementing certain functions in your project, you can first make a small demo, such as the demo above. Maybe someone will say it’s so easy, but if you are asked to use react to write a layout for a chat window similar to WeChat, how do you implement it?
The following is a small project I wrote using react that is similar to the WeChat chat window.

這里寫圖片描述

This is the end of this article on the detailed usage of overflow:auto. For more relevant content on the usage of overflow:auto, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!

<<: Detailed explanation of the installation, configuration, startup and shutdown methods of the Mysql server

>>: Implementing form submission without refreshing the page based on HTML

Tutorial on installing and changing the root password of MySQL 5.7.20 decompressed version

Detailed explanation of overflow:auto usage

Tutorial on installing and changing the root password of MySQL 5.7.20 decompressed version

Detailed explanation of Vuex overall case

JavaScript anti-shake and throttling explained

How to set process.env.NODE_ENV production environment mode

A very detailed tutorial on installing rocketmq under Docker Desktop

Beginners learn some HTML tags (1)

FastDFS and Nginx integration to achieve code analysis

Detailed explanation of the application of Docker Swarm in continuous integration testing

How to change password and set password complexity policy in Ubuntu

Detailed tutorial on using cmake to compile and install mysql under linux

Recommend

jQuery canvas generates a poster with a QR code

Analysis of the principles of Mysql dirty page flush and shrinking table space

How to click on the a tag to pop up the input file upload dialog box

Pitfalls encountered when installing the decompressed version of MySQL 5.7.20 (recommended)

Summary of learning HTML tags and basic elements

Detailed explanation of JavaScript closure issues

How to reset the root password of Mysql in Windows if you forget it

Detailed basic operations on data tables in MySQL database

Docker practice: Python application containerization

jQuery implements accordion small case

How to view and configure password expiration on Linux

Vue.js implements the nine-grid image display module

Detailed explanation of styles in uni-app

JavaScript implements simple calculator function

Detailed troubleshooting of docker.service startup errors