How to center the entire page content so that the height can adapt to the content and automatically expand

How to center the entire page content and how to make the height automatically expand and contract to adapt to the content. This is the most common problem when learning CSS layout. A practical example is given below, followed by a detailed explanation.

First, click here to see the actual running effect. This page can be centered and highly adaptive in Mozilla, Opera and IE browsers. Let's analyze the code:

Copy code

The code is as follows:

<html>
<head>
<style type="text/css">
body{
background:#999;
text-align:center;
color: #333;
font-family:arial,verdana,sans-serif;
}
#header{
width:776px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #EEE;
height:60px;
text-align:left;
} #contain{
margin-right: auto;
margin-left: auto;
width: 776px;
} #mainbg{
width:776px;
padding: 0px;
background: #60A179;
float: left;
}
#right{
float: right;
margin: 2px 0px 2px 0px;
padding:0px;
width: 574px;
background: #ccd2de;
text-align:left;
}
#left{
float: left;
margin: 2px 2px 0px 0px;
padding: 0px;
background: #F2F3F7;
width: 200px;
text-align:left;
}
#footer{
clear:both;
width:776px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #EEE;
height:60px;}
.text{margin:0px;padding:20px;}
</style>
</head>
<body>
<div id="header">header</div>
<div id="contain">
<div id="mainbg">
<div id="right">
<div
class="text">right<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div>
</div>
<div id="left">
<div class="text">left</div>
</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>

Code Analysis:
First, we define the body and the first line #header at the top. The key here is text-align:center; in the body and margin-right: auto;margin-left: auto; in the header. These two sentences make the header centered. Note: In fact, defining text-align:center; has already achieved centering in IE, but it is invalid in Mozilla. You need to set margin:auto; to achieve centering in Mozilla.

Next, define the two middle columns #right and #left. In order to center the two middle columns, we nest a layer #contain outside them and set margin:auto; for contain, so that #right and #left are naturally centered.
Note the order in which the two middle columns are defined. We first define #right and use float: right; to make it float to the rightmost side of the #contain layer. Then define #left and use float: left; to make it float to the left of the #right layer. This is exactly the opposite of the order we defined the table from left to right before (correction: it can be implemented either left first then right, or right first then left, design according to your needs).

We can see that there is a layer #mainbg nested between #contain and the two columns in the code. What is this layer used for? This layer is used to define the background of #contain. You may ask, why not define the background directly in #contain instead of adding an extra layer? That's because the background defined directly in #contain will not be displayed in Mozilla, so the height value must be defined. If a height value is defined, the #right layer cannot automatically scale based on the content. In order to solve the background and height problems, it is necessary to add such a #mainbg layer. The trick is to define float: left; in the #mainbh layer, because float automatically gives the layer width and height attributes. (For the time being, let’s understand it this way:)

Finally, the #footer layer defines the bottom. The key to this definition is: clear:both;, which cancels the floating inheritance of the #footer layer. Otherwise, you'll see #footer displayed right next to #header instead of underneath #right.
Now that the main layers are defined, the layout is ready. One more thing to add: You can see that I also defined a .text{margin:0px;padding:20px;}. The purpose of this class is to create a 20px blank space around the content. Why not define margin or padding directly in #right? Because Mozilla and IE have different interpretations of the CSS box model, directly defining margin/padding will cause layout deformation in Mozilla. I usually solve this problem by adding another layer inside.

<<: Explanation and example usage of 4 custom instructions in Vue

>>: Docker installs mysql and solves the Chinese garbled problem

Details on using regular expressions in MySQL

How to center the entire page content so that the height can adapt to the content and automatically expand

Details on using regular expressions in MySQL

Tips for writing concise React components

6 ways to view the port numbers occupied by Linux processes

How to share Flash pages through verification methods in website standards

Solution to 1045 error when navicat connects to mysql

Steps to change mysql character set to UTF8 under Linux system

A brief understanding of the three principles of adding MySQL indexes

The difference between button and input type=button and precautions

Detailed tutorial for springcloud alibaba nacos linux configuration

JavaScript design pattern learning proxy pattern

Recommend

The difference between method=post/get in Form

How to query data within a certain period of time with Vue front-end and Django back-end

How to use the Linux md5sum command

Difference and principle analysis of Nginx forward and reverse proxy

jQuery implements percentage scoring progress bar

Detailed explanation of mysql replication tool based on python

Full steps to create a high-performance index in MySQL

Rounding operation of datetime field in MySQL

Detailed explanation and examples of database account password encryption

MySQL learning to create and operate databases and table DDL for beginners

How to automatically deploy Linux system using PXE

Detailed explanation of using Nginx reverse proxy to solve cross-domain problems

How to use docker to deploy Django technology stack project

The difference between clientWidth, offsetWidth, scrollWidth in JavaScript

Several ways to pass data from parent components to child components in Vue