Detailed explanation of overflow:auto usage

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

Recommend

Analysis and solution of data loss during Vue component value transfer

Preface In the previous article Two data types in...

MySQL 8.0.12 installation and configuration method graphic tutorial (windows10)

This article records the installation graphic tut...

How to hide rar files in pictures

You can save this logo locally as a .rar file and...

Problems with changing password and connecting to Navicat when installing and using MySQL 8.0.16 under Windows 7

I encountered several problems when installing My...

Summary of several common ways to abbreviate javascript code

Table of contents Preface Arrow Functions Master ...

Application of Hadoop counters and data cleaning

Data cleaning (ETL) Before running the core busin...

Tutorial on installing Ubuntu 1804 in VMware Workstation 15 Pro (with pictures and text)

This note is an installation tutorial. It has no ...

How to modify port 3389 of Windows server 2008 R2 remote desktop

The default port number of the Windows server rem...

Use Xshell to connect to the Linux virtual machine on VMware (graphic steps)

Preface: I recently started to study the construc...

MySQL 8.0.15 installation and configuration graphic tutorial under Win10

This article records the installation and configu...

How to open the port in Centos7

The default firewall of CentOS7 is not iptables, ...

Solution to the error problem of Vscode remotely connecting to Ubuntu

1. Background of the incident: Because of work ne...

HTML+CSS realizes scrolling to the element position to display the loading animation effect

How to add a loading animation every time I scrol...

Detailed tutorial on building a continuous integration delivery environment based on Docker+K8S+GitLab/SVN+Jenkins+Harbor

Table of contents Environment Setup Overview 1.Wh...

The rel attribute of the HTML link tag

The <link> tag defines the relationship bet...