Web page height self-adapting problem

Objective: To achieve a high level of consistency between the left and right sides

Problem: Under each browser, use jquery to get a high-level problem

Today, using jquery (1.11.1) to get the height of the left and right sides, and to set the height to the height of the top, but halfway to find that when there is a picture in the content area, the height of the load only recognizes the height of the text area. Using Google Chrome (version 35.0.1916.153) testing, it was found that the height would be recognized as long as the image was set to a fixed height, and would not be recognized if no settings were set. Change IE9 Browser test, is able to identify the height of the normal.

Because I have this recognition height is mainly used to set the left sidebar has a background color, and set the height and the right content area of the same height. Later thought JS may appear incompatible problems, so use the middle of the entire large frame (red box) set the background color, and then set the right background to white to achieve.

Here are two questions to summarize:

1.js in each browser compatibility issues, so as far as possible without JS to achieve.

2. Sometimes a very simple rough way may solve the problem, CSS is a very good thing.