CSS web page production example: web page layout of three columns of equal-height DIVs_html/css_WEB-ITnose

First of all, the three-column layout of equal heights, as the name suggests, can be summarized as the following characteristics:

　1. 3 columns (idiots also know)

　2. These 3 columns are of equal height

3. The height of these three columns is not fixed, but changes with the change of content

Step 1:

xhtml code:

＜div id="header"＞#header＜/div＞

＜div id="container"＞

　 ＜div id="main" class="column"＞#main ＜/div＞

　 ＜div id="left" class="column"＞#left＜/div＞

　 ＜div id="right" class="column"＞#right ＜/div＞

＜/div＞

＜div id="footer"＞#footer＜/div＞

The main structural formula is the div of #container, as for #header and #footer are all to make it more like a web page. Back to #container, it contains three columns. The main contains the core and main content of a web page, so we cannot neglect it. In pure xhtml In the flow document, the browser parses it from top to bottom, so the important content should be placed relatively early. This is determined by the weight of the search engine, but visually, we will discuss it later. Put it in the middle.

Think about it: How can these three columns move together intelligently without specifying the height?

In fact, if you don’t write the height, you can’t keep pace with intelligence. So how to write the height? The answer is to use the box model to write its padding. This is a perverted method, but it works. It's like a person is actually only 170cm, but including 20cm of hair, oh my god, he is already 190cm. Let's give a solution first: use padding-bottom and margin-bottom;

Step2 :

#container {

background-image: url('bg.gif');

width: 960px;

margin: 0 auto;

　}

　#main{float: left: width: 500px;background-color: #e5e5e5;}

　#left{float: left: width: 300px;background -color: #7bd;}

#right{float: right: width: 160px;background-color: #f63;}

Step3:

#container .column {

 padding-bottom: 32767px;

 margin-bottom: -32767px; You can understand this number as "big enough" so that there is enough space to expand its box. It should be gigantism when it is so high. It doesn't matter. We can use the negative value of margin-bottom to hide it. This technique is used in In my opinion, I really can’t explain it clearly. There is an old saying: Understanding comes through words! Just try it and you'll understand the secret. The picture below should be helpful for your understanding:

　

At this step, you will find that the box model of these three columns is 32767px. At this time, you need to add: overflow: hidden; of course IE6.0 is: zoom:1;

#container {

background-image: url('bg.gif');

width: 960px;

margin: 0 auto;

overflow: hidden;

　}

Step4:

Now the visual effect of #main is in the leftmost column, we have to find a way to make it in the middle

Idea: First arrange #main to the middle, we can #main{margin-left:300}, at this time, #left is squeezed to the position of 800px, at #left{margin-left:-800px ;} It can be done, but it's a pity that IE6 is such a bitch. I am really speechless and have to think again.

Generally, when doing layout in CSS, there are several ideas, one is float, the other is positioning. Regarding positioning, if you are not familiar with it, just google it. Let me mention: position: relative; Attribute, if top and left are not specified, its visual effect will not change.

Therefore, in order to make #main a breakthrough in visual effects, you must specify top or left. Here you only need to specify left,

　 #main {

float: left;

background-color: #e5e5e5;

width: 500px;

left: 300px; > #left {

float: left;

background-color: #7bd;

width: 300px;

left: -500px; >
　}

In fact, there is another concept that is more important in the middle. #main, #left After position: relative, there is the concept of layer, so when #main{left :300px}, #left has become independent and will not be squeezed to the 800px position. Therefore: it needs left:-500px to reach the left side, and 500 is the width of #main.

The last consideration is backward compatibility,

Provide a piece of code:

Although I have written so much, just because you can do it, it does not mean that you should do it. It is a question of tactics and strategy. Here is what I personally want to know:

I think at the beginning:

padding-bottom: 32767px;

margin-bottom: - 32767px;

With such a large value, will it consume a lot of resources during the reflow stage? Would it be easier to use js to control their height?

It’s the first time I write something like this, and I find it very tricky. It’s still very obscure both in terms of conception and language expression. I hope everyone will actively correct me and hope to communicate with more friends. , on the one hand, it is to improve oneself, on the other hand, it is to promote the harmony and sharing of the community and do one's own meager strength.