What happens when the height of the page or the percentage of the div is invalid?

1. Do you once said that if you want to take advantage of the page or the percentage of DIV percentage, I believe you have also searched, that is, you need to set up a father and father until the ancestor HTML must set a percentage to be effective.

In a word: If you want to set its height with a percentage, at least one of its parents must have a fixed height, otherwise all the parents will reach the ancestor html (because the outside of html is the browser, it has a height )mustset the percentage. Of course, we must exclude those divs that are out of the document flow, such as position:absolute,fixed. It can be considered that their parent is the browser, so the height percentage is always valid, because the height of the browser can be reached.

2. Sometimes the percentage is not used directly. There may be some margin and padding that need to be deducted. In this case, you can use height: calc(100% - 1rem); height: calc(50% - 2px ); Wait, the valid conditions for this situation must also be explained in the first point, because it also uses the height percentage.

Under today's responsive layout requirements, many elements that can automatically adjust their size can be height- and width-adaptive, such as img, which uses {width:50%;height:auto;} to realize that the image height follows the width. Scale adjustment.

However, the most commonly used tag, Div, cannot be automatically adjusted (either inherited from the parent, or specifying px by yourself, or giving a percentage! But this percentage is calculated based on the height of the parent) , it is not based on the width of the element itself at all, so the width and height of the Div cannot reach a certain ratio =-=).

To achieve this function (div height:width=1:1), through various buffs, we learned that there are the following processing methods

1, directly specify the width of the div High+zoom to achieve self-adaptation

div{width:50px;heigth:50px;zoom:1.1;}

This can achieve a preliminary equal-width-height div, but the limitations are too great. PASS!

2, dynamically determine the width of the div through js to set the height

div{width:50%;}

window.onresize = function(){div.height( div.width);}

can also achieve equal width and height divs, but it always feels a bit awkward, PASS!

3, set by width and height units

div{width:20vw;height:20vw;/*20vw is 20% of viewport width*/}

But there are many The device does not support this attribute, the compatibility is too poor, PASS!

4, set by float

#aa{background:#aaa;;}
#bb{background:#ddd;;float:left}
#cc{ background:#eee;;float:right}