In the web page layout, the main part of the web page is divided into one row and two columns. In many cases, designers often design the background colors of the left and right columns into different colors, to achieve a clear distinction between content blocks. However, such a design poses a seemingly simple and difficult problem for the layout, that is, how to implement highly adaptive background for the left and right columns, when the content on the left is higher than that on the right, the background color on the right is the same as that on the left. When the content on the right is higher than that on the left, the background color on the left is the same as that on the right;
To achieve this, I checked countless articles on the Internet and did not have a good solution. Most people use a large negative number, and others use javascript to implement it; later, because I felt that this was unreasonable, I used tables to implement it. This was the easiest way. But today my colleagues asked me this question and I thought about it carefully at noon; come up with a solution and write it out to share with you;
Basic Principles:
1. The layout should be reasonable. html code cannot be bloated to achieve this effect;
2. the CSS part should also be implemented in a simple and clever manner, and a large amount of Code cannot be written for such effect; the main problem is that there is no problem with browser compatibility;
The following is my implementation code, which shows that this layout is not ideal, but this is the best solution I can think of for the moment;
Method 1: Use a border on the left and a background color on the right;
This method uses a PX border on the left to implement the background of a column, and uses the actual background color of this label to implement the background of another column, so that the Left and Right are always the same height;
Program code
| Reference content is as follows: <Div id = "box"> <Div id = "right"> right <br/> right </div> <Div id = "left"> left </div> <Div style = "clear: both"> </div> </Div> |
Program code
<Style>
/* This line may not need to be viewed. It is nonsense. To look better */
* {Padding: 0; margin: 0; font-size: 12px; line-height: 1.8; font-family: Verdana ;}
/* A box with the outermost side, 200PX on the left border, with a background color */
# Box {background: # FFCC00; width: 700px; border-left: 200px solid # FF9900 ;}
/* Move a column on the left to PX on the left */
# Left {margin-left:-200px; width: 200px; position: static ;}
/* Because there is a difference between IE and FIREFOX, a line is added to IE for processing */
* Html # left {position: fixed ;}
/* The width on the right. Why didn't I write 700PX here? To be honest, I really don't want to understand it; here, I can only write 900-200-2 = 698PX at most; but this is in use, it does not have any impact ;*/
# Right {float: right; width: 695px ;}
</Style>
Demo effect:
| Reference content is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Method 1 has a problem: what if the background on the left is a graph? Yes, if it is solid color, there is no problem; if it is a picture, there is no way; so I wrote the second solution;
Method 2: Implement two columns of background with nesting. I personally recommend this method;
Program code
| Reference content is as follows: <Div id = "box"> <Div id = "content"> <Div id = "right"> right <br/> right </div> <Div id = "left"> left </div> </Div> </Div> |
I don't need to explain the CSS part!
Program code
<Style>
* {Padding: 0; margin: 0; font-size: 12px; line-height: 1.8; font-family: Verdana ;}
# Box {background: # FFFF66; width: 700px; padding-left: 200px; float: left ;}
# Content {background: # FF6600; float: left ;}
# Right {width: 695px; float: right ;}
# Left {width: 200px; margin-left:-200px; position: static; float: left ;}
* Html # left {position: fixed ;}
</Style>
Demo effect:
| Reference content is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> <Title> http://www.zishu.cn </title> <Style> * {Padding: 0; margin: 0; font-size: 12px; line-height: 1.8; font-family: Verdana ;} # Box {background: # FFFF66; width: 700px; padding-left: 200px; float: left ;} # Content {background: # FF6600; float: left ;} # Right {width: 695px; float: right ;} # Left {width: 200px; margin-left:-200px; position: static; float: left ;} * Html # left {position: fixed ;} </Style> </Head> <Body> <Div id = "box"> <Div id = "content"> <Div id = "right"> right <br/> right </div> <Div id = "left"> left </div> </Div> </Div> </Body> </Html> |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
