Home > Developer > Web Develop
Recently wrote a project, write the structure of the page, the HTML tree structure is a header,container,footer section, where the container part is the right column is fixed width, the left is the adaptive width and screen height.
The first blog post is the container section is fixed on the left column, and the right side is the adaptive effect. The left column is very good to write, but the right column is not very good to write, the following is the basic structure and style.
<Divclass= "Container"style= "Overflow:hidden;"> <Divclass= "Left Leftcont"> </Div> <Divclass= "Right Rightside"> </Div></Div
1. The left and right column height is certain, if you still want to follow the left fixed mode to write the fixed effect. Can be written as follows:
You can see that the two div under container has been swapped.
<styletype= "Text/css">. Rightside{width:200px;Height:600px;background:Red;float: Right; }. Leftcont{width:100%;Margin-right:200px;Background-color:Blue;Height:600px; } </style></Head><Body> <Divclass= "Container"style= "Overflow:hidden;"> <Divclass= "Rightside"> </Div> <Divclass= "Leftcont"> </Div> </Div></Body>
2. If you do not want to swap the two sub-div position, you can write the following code,
<styletype= "Text/css">. Rightside{width:200px;Height:600px;background:Red;float: Right; }. Leftcont{float: Left;width:100%;Margin-right:200px;Background-color:Blue;Margin-bottom:-2000px;Padding-bottom:2000px; } </style></Head><Body> <Divclass= "Container"style= "Overflow:hidden;"> <Divclass= "Left Leftcont"> </Div> <Divclass= "Right Rightside"> </Div> </Div></Body>
This interface achieves the effect, and the height of the left side is the same as the height of the right div. The two key words are: margin-buttom:-2000px; padding-buttom:2000px; And 3000px is not a fixed value, as long as it is higher than the actual requirements of the high-OK.
Page HTML structure right column fixed, left adaptive size.
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
