Pure CSS to adjust Div height according to adaptive width (percentage)

Under the requirements of today's responsive layout, many elements that can automatically adjust their size can achieve height and width adaptation, such as img, which can achieve image height adjustment following width ratio through {width:50%;height:auto;}.

However, the most commonly used tag, Div, cannot adjust automatically (either inherit from the parent, specify px yourself, or give a percentage! But this percentage is calculated based on the height of the parent, not the width of the element itself, so it is impossible to achieve a certain ratio between the width and height of Div =-=).

To achieve this function (div height: width = 1:1), through various buffs, we know that there are several ways to deal with it:

1. Directly specify the width and height of the div + zoom to achieve adaptive

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

This can achieve the initial equal width and height div, but the limitations are too great, PASS!

2. Use js to dynamically determine the width of the div to set the height

div{width:50%;}

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

It is also possible to 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*/}

However, many devices do not support this attribute and the compatibility is too poor, PASS!

4. Set by float

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

<div id="aa">parent div
  <div id="bb">child div</div>
  <div id="cc">child div</div>
  <div style="clear:both">This is used to clear errors</div>
</div>

The parent element aa can automatically change its height according to the height of the child element (placing adaptive elements in the child elements) to adjust the aspect ratio to be consistent, but it is too troublesome, PASS!

5. Finally, the ultimate killer, this function is achieved through padding

Through experiments with the above solutions, it is found that the width adaptation is adjusted according to the width of the viewport. For example, {width: 50%} means 50% of the browser's visible area, and it will automatically adjust after resizing.

When the height is specified as a percentage, it will automatically find the height of the viewport to adjust, which has nothing to do with the width. Naturally, the two cannot reach a proportional relationship. With this idea in mind, we can solve this problem by finding a property that is related to the width of the viewport.

This property is padding. Padding is adjusted according to the width of the viewport. Coincidentally, padding-top and padding-bottom are also calculated based on the width of the viewport. So by setting this property, a certain proportional relationship can be achieved with the width.

We first specify the width of the element to be 50% of the parent element (the parent element is any element with height and width. You cannot specify a specific parent element, otherwise it will affect the versatility of this solution)

.father{width:100px;height:100px;background:#222}

.element{width:50%;background:#eee;}

At this time, we set the element's height to 0 and padding-bottom: 50%;

.element{width:50%;height:0;padding-bottom:50%;background:#eee;}

The element becomes a square with a width of 50% and a height of 0 (but it has a padding-bottom of 50% width). The effect is as shown in the gray-white div in the figure below.

At this point someone may ask, if the height of this div is 0, then what if I want to place an element inside an element, wouldn't that overflow? Here we have to mention the overflow attribute, which is calculated including the content and padding of the div, that is,

Originally your div may be a div with {width: 50px; height: 50px; padding: 0}, but now it becomes a div with {width: 50px; height: 0; padding-bottom: 50px;}. The size is still the same. By specifying the positioning of the child elements of this div, it can still be displayed normally.

In this way, we can achieve this requirement (div width and height fixed ratio) in any case by setting the parent element father, the element we need element, and the child element datail.

This is the end of this article about how to use pure CSS to adjust Div height according to adaptive width (percentage). For more relevant content about how to adjust Div height according to adaptive width, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!