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

Example code for implementing transparent gradient effects with CSS

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

Example code for implementing transparent gradient effects with CSS

CSS code abbreviation div+css layout code abbreviation specification

js+canvas realizes code rain effect

How to install and modify the initial password of mysql5.7.18

Detailed explanation of JDBC database link and related method encapsulation

How to avoid garbled characters when importing external files (js/vbs/css)

Web page WB.ExecWB control printing method call description and parameter introduction

Detailed explanation of CSS child element fixed positioning solution relative to parent element

Solution to many line breaks and carriage returns in MySQL data

JavaScript to achieve the idea of snake game

Recommend

Diving into JS inheritance

Use Docker to build a Git image using the clone repository

In-depth explanation of the global status of WeChat applet

Solution to win10 without Hyper-V

Detailed tutorial for installing winx64 under mysql8.0.18 (with pictures and text)

How to install MySQL database on Ubuntu

Understanding MySQL Locking Based on Update SQL Statements

Detailed explanation of overflow:auto usage

Vue backend management system implementation of paging function example

Various types of MySQL indexes

MySQL data insertion optimization method concurrent_insert

Detailed explanation of sql_mode mode example in MySQL

Install tomcat and deploy the website under Linux (recommended)

Detailed explanation of the relationship between Vue and VueComponent

Native js to implement drop-down menu