Under the Web standard, the width of the Left bar and the adaptive width of the right bar are common in the OA system ".

Today, a smart solution solves the "Difficult Problem" that has not been solved for two years, such as the title.

This problem is very troublesome. The usual solution is double left floating (float: Left ;), then, use the private properties of IE for the width of the right bar (the screen width minus the Left bar and the browser border). Generally, the OA system uses IE, but even if it is based on different browsers with the same core as IE, due to the calculation error, the adaptive problem cannot be solved perfectly. In addition, if you want to apply it to Firefox, the width can only be fixed. JS? Who will? I'm not familiar with it and I'm lazy.

The solution is as follows:

Idea: the left column is flying up (absolute), the right column is not affected, and the width is still 100%. Then, use the padding-left of the parent tag to push the horizontal start point of the right column to the horizontal end point of the left column. OK.

Structure Code:
<Div class = "X">
<Div class = "A"> left column </div>
<Div class = "B"> right column </div>
</Div>

CSS section:
. X {position: relative; padding-left: 200px ;}
. A {position: absolute; left:-200px ;}

Disadvantages:Because a is floating, the height of a does not affect other block elements. If the height of a is higher than that of B (for example, a long tree or B is not tall and a short page is encountered ), there will be problems to be solved (currently we recommend that you set B to a high and A to a high automatically drop-down ). However, the right-column adaptive problem is easily and perfectly solved when a is aware of or controllable height.

Tip:Using the outermost layer of the body or form tag can bring unexpected benefits. For example, X in the example can be absent. This example shows how to use it. Old, young, and beneficial ......

If anyone knows how to solve this problem, please let us know.

So CSS is such a skill. How high technical level do you need to solve this problem? The method is also very simple, but it gets stuck with me or you still have such a long time.