CSS creates multiple columns with the same height

The most frequently asked questions about my personal website are:
How do you extend the background color of the right column down?
This is indeed a very simple question. Maybe you are quite familiar with it, but many people do not know it yet. The technology described below is a simple tip that helps you solve this headache.
Vertical stretch
CSS has somewhat frustrating features, such as stretching elements vertically based on the length they really need. That is to say, if you put an image with a height of 200 pixels in a <div>, this <div> will only stretch to a height of 200 pixels.
When you use <div> to separate your tags (the translator creates XHTML code in a structured manner) and then apply CSS to create a column layout, things become interesting and difficult. One column may be longer than the other (Figure 1 ). Because the column height depends on the total content contained in the column, it is difficult to create a column layout with the same height but different colors.
Figure 1
There are some ways to make the vertical bars look as long as they are in the vertical direction without considering the content they contain. Here I will share with you my own Solutions (used in combination with the absolute positioning layout), which is very, very ...... A simple method. The same technique is also used elsewhere, including A List Apart (this method is not currently used by the translator, ALA, and may have been revised, the same below ).
Deception
The secret of the entire solution is actually very simple. You can use a vertically tiled background image to create a colored split-column photo. Taking SimpleBits as an example, I created a background image as shown in figure 2. On the far left is a decorative pattern. On the right is a wide white area (used for the content Bar) followed by a pixel border, followed by a light brown background (used for the sidebar ), the rightmost is the decorative pattern, which is the horizontal flip of the leftmost decorative pattern.
Figure 2
The entire image is only a few pixels high, but when it is tiled vertically, a coloring column structure that stretches until the bottom of the page is created-regardless of the content in the column.
CSS
This basic CSS rule will be added to the body element. Background: # ccc url(bg_birch_800.gif) repeat-y 50% 0;
Essentially, we set the background of the entire page to Gray and only tile the background image (repeat-y) in the vertical direction ). "50% 0" sets the positioning of the background image-in this example, from the left side of the browser 50% (center the image) and tile from the top 0 pixels.
Column positioning
After setting the background image, locate the vertical bar to the top. Both the left and back sides have their own internal and external patches, make sure they are in the correct place-in the false vertical bar created by the background image (figure 3 ).
Figure 3
Another important thing needs to be mentioned. If any vertical bar contains borders, internal patches, and external patches, we need to remedy the Bug of the IE/Win box model, refer to the Box Model Hack or Mid Pass Filter of Tantek Celik.