The background color or image inside the div container grows as it grows

The background color or image inside the div container grows as it grows

Copy code
The code is as follows:

height:auto !important;
height:550px;
min-height:550px;

Add the following code to the end of Div:
<div style="clear:both;"></div>

Or use

<br style="clear:both;" />

2. Use the after pseudo-class

This method is to use the after pseudo-class and content declaration for the parent container to add new content at the end of the specified current content. A common practice is to add a "dot" because it is smaller and less noticeable. We then use it to clear floats (close floated elements) and hide the content.

This method has average compatibility, but after various hacks it can handle different browsers, while also ensuring that the HTML is relatively clean, so it is still used quite frequently.


Copy code
The code is as follows:

#outer:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}

3. Set overflow to hidden or auto

This approach is to set the overflow of the parent container to hidden or auot to close the floating element in standard compliant browsers.

However, when using overflow, it may affect the performance of the page, and this impact is uncertain. It is best to test your page on multiple browsers.

4. Floating external elements, float-in-float

This approach is to make the parent container float as well, which takes advantage of a feature of floating elements - floating elements will close floating elements. This method has good effects in IE/Win and standard-compatible browsers, but its disadvantages are also obvious - the parent container may not be able to float whenever it wants. After all, floating is a special behavior, and sometimes it is normal that the layout does not allow it to float.

<<:  Detailed explanation of the use of Echart charts in the front-end and back-end of the project

>>:  Sample code for implementing mobile expansion and collapse effects with pure CSS3

Recommend

About Vue virtual dom problem

Table of contents 1. What is virtual dom? 2. Why ...

Detailed explanation of the meaning and difference between MySQL row locks and table locks

1. Introduction The difference between row locks ...

Introduction to Semantic HTML Tags

In the past few years, DIV+CSS was very popular in...

How to install Nginx in CentOS

Official documentation: https://nginx.org/en/linu...

In-depth understanding of HTML relative path (Relative Path) and absolute path (Absolute Path)

I have been engaged in Java web development for mo...

js to achieve simple product screening function

This article example shares the specific code of ...

Comparing Node.js and Deno

Table of contents Preface What is Deno? Compariso...

Shell script builds Docker semi-automatic compilation, packaging and release application operations

The Docker publishing method provides many conven...

Vue realizes the percentage bar effect

This article shares the specific code of Vue to r...

Detailed analysis and testing of SSD performance issues in MySQL servers

【question】 We have an HP server. When the SSD wri...

Detailed explanation of JS browser storage

Table of contents introduction Cookie What are Co...

How to build a drag and drop plugin using vue custom directives

We all know the drag-and-drop feature of HTML5, w...

How to choose and use PNG, JPG, and GIF as web image formats

So which one of these formats, GIF, PNG, and JPG,...

Synchronize the full and incremental data of a specific MySQL table to the message queue - Solution

Table of contents 1. Original demand 2. Solution ...

Detailed explanation of the basic use of Apache POI

Table of contents Basic Introduction Getting Star...