A brief discussion on the CSS overflow mechanism
|
Why do you need to learn CSS overflow mechanism in depth? In the actual development process, content overflow is often seen. If you don't understand this mechanism in depth, you will often encounter questions like: Why is this element not affected by the overflow:hidden of the ancestor element? Which element does the scroll bar appear here? How to remove this scroll bar? How to add scrolling functionality to a specific element? In this article, we will discuss the details of the CSS overflow mechanism based on the CSS standard. overflow Overflow occurs when the contents of a box (block container box) (child elements, grandchild elements, and other descendants) exceed the size of the box itself. At this time, the CSS property overflow determines how to handle overflow. This CSS property is well known to everyone, so I won't discuss it here. Here are a few points that need attention: Overflow affects the clipping and scrolling of all the content of the element, but there is one exception: "It affects the clipping of all of the element's content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element." In other words, the element where overflow is located must be the direct or indirect containing block of the content element, then the overflow property will affect this content element. For example, <A><B><C><C/><B/><A/>. Generally speaking, the overflow of B will affect C. However, if C is positioned relative to the viewport or A (for example, using position:absolute), the display of C will not be affected by the cropping or scrolling of B. When a scroll bar is needed, it will be placed between the border and the padding. After the parent element generates a scroll bar, the size of the containing block it generates will be reduced to make room for the scroll bar. The overflow property on <html> and <body> bubbles up: "UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'. " It can be inferred that: Generally speaking, only elements can have scroll bars (more precisely, only elements that generate block container boxes can have scroll bars). The visual viewport is an exception. Although it is not an element, it can also have scroll bars. If the overflow attribute is not set on <html> and <body> and the default value of visible is used (this is the case in most scenarios), then the overflow of the visual viewport is auto: when the content of the web page exceeds the visual viewport, a scroll bar will appear on the visual viewport. The final overflow of <html> is always visible. That is, the <html> element can never have scroll bars. If you want to set a non-visible overflow for <body>, you need to first set a non-visible value for <html> to bubble, so that the overflow of <body> will not be bubbled. Small Exercise Small exercise: Using the above principle, both the visual viewport and <body> have horizontal and vertical scroll bars, for a total of 4 scroll bars. You can’t use overflow: scroll (that would be too easy). step:
Code + comments:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>test</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
/* Make the html always the same size as the visual viewport (even if you zoom or resize the browser window), so that the body can be set to a size larger than the visual viewport (110%).
For elements that default to block, width: 100% can be omitted; */
width: 100%;
height: 100%;
/* The non-visible value bubbles to the visual viewport, so that the visual viewport can have a scroll bar*/
overflow:auto;
border: 15px solid red;
}
body {
/* Make the body scrollable*/
overflow:auto;
/* The body overflows the HTML, thus overflowing the initial containning block, and thus overflowing the visual viewport, causing a scroll bar to appear in the visual viewport.
Of course, you can also trigger the overflow of the visual viewport in many other ways, such as increasing the size of the HTML element, or making a position: absolute div in the body */
width: 110%;
height: 110%;
border: 15px solid green;
}
main {
/* main overflows the body, causing a scroll bar to appear on the body*/
width: 110%;
height: 110%;
border: 15px solid blue;
}
</style>
</head>
<body>
<main>
</main>
</body>
</html>result:
If you open the above code in Chrome yourself, you can see more clearly how it is done. It is also possible to overflow the initial containing block in an absolute way:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>test</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
/* Make the html always the same size as the visual viewport (even if you zoom or resize the browser window), so that the body can be set to a size larger than the visual viewport (110%).
For elements that default to block, width: 100% can be omitted; */
width: 100%;
height: 100%;
/* The non-visible value bubbles to the visual viewport, so that the visual viewport can have a scroll bar*/
overflow:auto;
border: 15px solid red;
}
body {
/* Make the body scrollable*/
overflow:auto;
/* Set a size for body so that main can be set to a larger size than body (110%).
For elements that default to block, width: 100% can be omitted; */
height: 100%;
border: 15px solid green;
}
main {
/* main overflows the body, causing a scroll bar to appear on the body*/
width: 110%;
height: 110%;
border: 15px solid blue;
}
.abs {
/* Overflow the initial containing block in an absolute way, thereby overflowing the viewport */
position: absolute;
width: 100px;
height: 100px;
right: -100px;
bottom: -100px;
border: 15px solid blueviolet;
}
</style>
</head>
<body>
<main>
</main>
<div class="abs"></div>
</body>
</html>result:
If you open the above code in Chrome yourself, you can see more clearly how it is done. How to tell which element a scroll bar belongs to? You can see the element to which the scroll bar belongs through Chrome DevTools. As mentioned before, the scroll bar is located between the border and padding of the element. When you select an element using Chrome DevTools and find that the scroll bar is just inside the highlighted area (border), the scroll bar belongs to the current element.
To determine whether the scroll bar belongs to the visual viewport, first scroll the right and bottom scroll bars to the bottom and right respectively (this step is very important, it ensures that there is no content hidden under the scroll bar). Then, press
References CSS2.1 Standard The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: Web page HTML ordered list ol and unordered list ul
>>: Vue's detailed code for implementing the shuttle box function
Recommend
Img semi-transparent processing Img plus semi-transparent background implementation ideas and code
Copy code The code is as follows: <!DOCTYPE ht...
Installation process of CentOS8 Linux 8.0.1905 (illustration)
As of now, the latest version of CentOS is CentOS...
How to install MySQL 5.7 on Ubuntu and configure the data storage path
1. Install MySQL This article is installed via AP...
Tomcat class loader implementation method and example code
Tomcat defines multiple ClassLoaders internally s...
HTML table tag tutorial (27): cell background image attribute BACKGROUND
We can set a background image for the cell, and w...
Examples of two ways to implement a horizontal scroll bar
Preface: During the project development, we encou...
The implementation process of ECharts multi-chart linkage function
When there is a lot of data to be displayed, the ...
Which is faster among MySQL full-text index, joint index, like query, and json query?
Table of contents Query Background 1. Like query ...
CSS Problems with Using Position:fixed and Margin-top Together on Same-Level Elements
Problem Description I want to use CSS to achieve ...
JavaScript data transmission between different pages (URL parameter acquisition)
On web pages, we often encounter this situation: ...
Solve the problem of Access denied for user 'root'@'%' to database 'xxx' after creating a database in MySQL
Preface I recently encountered a problem at work....
Interviewers often ask questions about React's life cycle
React Lifecycle Two pictures to help you understa...
MySQL Series 12 Backup and Recovery
Table of contents Tutorial Series 1. Backup strat...
A brief analysis of vsftpd service configuration in Linux (anonymous, user, virtual user)
vsftpd Overview vsftpd is the abbreviation of &qu...
Detailed steps to install MySQL 5.7 via YUM on CentOS7
1. Go to the location where you want to store the...