During the test, it was found that when choosing a template and choosing a product, the second step and the third step. If it exceeds two lines, it will be covered and invisible (because all the heights are written to death, and overflow~emmm~ is added), so it must be changed to a marquee. As shown in the figure:
Then the problem comes, I select the product in step 1 and select the template in step 2 on the same page, but the dom under the parent element is modified. The sidebar needs to change with the height of the content box on the right. Now we need to modify the height of the content box in step 1 and step 2 under the same page, and make the height of the left menu bar change in real time.
Also called column heights are automatically equal
Finished effect:
height 750px;
height 1048px;
First, modify the height of the current page to death:
Parent element wrapping left menu bar and right content box: parentBox add overflow :hidden; zoom :1;
Left menu bar: height:auto; margin-bottom : -900 px; padding-bottom : 900 px; (the size here can be set according to the actual situation)
Right content box: height: 100%;
The above processing method is only suitable for a menu bar like me that has few operations on the left side, because I am not sure whether there will be special bugs in some saucy operations. So far, the words on my side have not appeared.
Finally, the display:table-cell; method can also handle this state. Recommend a great blog about display:table-cell and other height layouts:
Several applications of display:table-cell that I know